1、这是webkit浏览器下显示的样式。
2、IE浏览器下显示的样式(为了区别，样式写得不一样。 在IE下找不到设置滚动条宽度高度的方法) )。
代码：
Lorem ipsum dolor sit amet，consecteturadipisicingelit.debitisexquiaabaliquidfacerearchitectoculpadolorumfugitcorrruptiharumarumacucuacucucutior
Lorem ipsum dolor sit amet，consecteturadipisicingelit.reruminciduntquiaipsamtotamteneturmaximerepellenduspossimusdebitiaevelititititatitevelitititit
Lorem ipsum dolor sit amet， consecteturadipisicingelit.consequaturfacilisipsamisterepellatsintnumquamexplicabovoluptatumvoluptatecorporisfugitadipisciquququral
Lorem ipsum dolor sit amet，consecteturadipisicingelit.architectovoluptatemdoloresabdoloremestitaqueutsitdeseruntquilauaudadantiumetiumetiumed
Lorem ipsum dolor sit amet，consecteturadipisicingelit.veniamquiadoloremqueblanditiisquasundenostrumavoluptatibusquamperspiciatiation
#scroll{
width:200px；
height:200px；
Overflow :自动；
玛格琳- bottom : 20px；
}
#scroll div{
width:400px；
height:400px；
}
# scroll :3360-WebKit-scroll bar {/*滚动条的整体部分。 其中的属性包括width、height、background、border等(与块级元素相同) (位置1 ) /
width:10px；
height:10px；
}
# scroll :3360-WebKit-scroll bar-button {/*滚动条两端的按钮可以通过在display:none上隐藏、添加背景图像或改变颜色来改变显示效果(位置2 ) ) /
后台： # 74d 334；
}
# scroll :3360-WebKit-scroll bar-track {/*外轨道可以在display:none中隐藏，可以添加背景图像，也可以通过颜色更改显示效果。 (位置3 ) /
后台： # ff66d 5；
}
# scroll :3360-WebKit-scroll bar-track-piece {/*内层轨道，滚动条中部(位置4(*/
后台： # ff66d 5；
}
# scroll :3360-WebKit-scroll bar-thumb {/*滚动条中可拖动的部分(位置5(*/
background:#FFA711；
border-radius:4px；
}
# scroll :3360-WebKit-scroll bar-corner {/*角(位置6(*/
后台： # 82 AFFF；
}
# scroll :3360-WebKit-scroll bar-resizer {/*定义右下角拖动块的样式(位置7 ) */
后台： # ff0bee；
}
#scroll{
scroll bar-arrow-color : # f4ae 21； //*三角箭头颜色/
scrollbar-face-color: #333； /**//*立体滚动条的颜色*
scroll bar-3d灯光颜色： # 666； /**//*立体滚动条明亮边的颜色*
scroll bar-highlight-color : # 666； /**//*滚动条空白部分的颜色*
scroll bar-shadow-color : # 999； //*立体滚动条阴影颜色/
scroll bar-dark shadow-color : # 666； /**//*立体滚动条的强烈阴影颜色*
scrollbar-track-color: #666； /**//*立体滚动条的背景颜色*
scroll bar-base-color : # f8f8 F8； /**//*滚动条的基本颜色*
}
简单版(IE样式可以保留默认值)。
#scroll-2{
width:200px；
height:200px；
Overflow :自动；
玛格琳- bottom : 20px；
}
#scroll-2 div{
width:400px；
height:400px；
}
# scroll-2:3360-WebKit-scroll bar {
width:4px；
高海拔：4 px；
}
# scroll-2:3360-WebKit-scroll bar-track {
后台： # f6f6f 6；
border-radius:2px；
}
# scroll-2:3360-WebKit-scroll bar-thumb {
后台： # AAA；
border-radius:2px；
}
# scroll-2:3360-WebKit-scroll bar-thumb : hover {
后台： # 747474；
}
# scroll-2:3360-WebKit-scroll bar-corner {
后台： # f6f6f 6；
}
webkit浏览器滚动条的样式设置位置如下：
IE浏览器滚动条的样式设定位置请参照下图