前端ABC1、webkit内核浏览器
/*滚动条 start*/
::-webkit-scrollbar {
width: 10px;
height: 4px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background: #fff ;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:rgba(7, 170, 247, 0.7);
}
::-webkit-scrollbar-thumb:hover {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:rgba(7, 170, 247, 1);
}
2、ie浏览器（只能修改颜色）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
padding: 20px;
overflow: auto;
/*三角箭头的颜色*/
scrollbar-arrow-color: #f00;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #ff0;
/*滚动条整体颜色*/
scrollbar-highlight-color: #333;
/*滚动条阴影*/
scrollbar-shadow-color: #ccc;
/*滚动条轨道颜色*/
scrollbar-track-color: #666;
}
</style>
</head>
<body>
<div id="div1"> scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离</div>
</body>
</html>
3、jq插件
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.em.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript">
$(function()
{
// this initialises the demo scollpane on the page.
$('#pane1').jScrollPane();
});
</script>
常用的参数配置项
1、showArrows：是否显示滚动箭头，模式是false；
2、maintainPosition：当滚动区重新初始化后，是否保持滚动条的原有位置，默认是true；
3、stickToBottom：当maintainPosition设置为true，且滚动区域到达底部，当有新内容添加的时候任然会固定在滚动区域底部，默认是false；
4、stickToRight：与stickToBottom属性原理类似，只是方向是右侧而不是底部；
5、autoReinitialise：自动初始化滚动区，内部实现机制实际上是一个定时器，当检测到内部有内容新增时，重新初始化，由于性能原因，默认false；
6、autoReinitialiseDelay：当autoReinitialise设置为true时，该属性表示自动初始化的延时，默认是500ms；
7、verticalDragMinHeight：垂直可拖动的最小高度，默认是0；
8、verticalDragMaxHeight：垂直可拖动的最大高度，默认是99999；
9、horizontalDragMinWidth：水平可拖动的最小距离，默认是0；
10、horizontalDragMaxWidth：水平可拖动的最大距离，默认是99999；
11、contentWidth：滚动区域的宽度，一般不要设置，该插件会根据内容实际宽度计算，默认undefined；
12、animateScroll：当调用scrollTo 或者scrollBy的时候，设置一个动画效果，包括时长duration和渐变ease，默认false；
13、animateDuration：动画时长，默认300ms；
14、animateEase：动画渐变函数，默认linear；
15、hijackInternalLinks：劫持锚链接，定位到滚动区域指定位置，默认false；
16、verticalGutter：垂直方向，内容和滚动条之间的距离，默认是4px；
17、horizontalGutter：水平方向，内容和滚动条之间的距离，默认是4px；
18、mouseWheelSpeed：鼠标滚轮的速度，默认是10px；
19、arrowButtonSpeed：方向按钮滚动内容的速度，默认是10px；
20、arrowRepeatFreq：按住方向按钮，内容滚动的频率，默认是100ms；
21、arrowScrollOnHover：当鼠标悬浮在方向按钮上时，是否允许滚动，默认false；
22、verticalArrowPositions：垂直方向按钮和固定点的位置，默认split；
23、horizontalArrowPositions：同上，水平方向；
24、enableKeyboardNavigation：是否允许键盘导航，默认true；
25、hideFocus：是否隐藏焦点框，默认false；
26、clickOnTrack：当点击固定点的时候，是否向相应方向滚动内容，默认true；
27、trackClickSpeed：点击固定点的滚动速度，默认是30px；
28、trackClickRepeatFreq：点击固定点的滚动频率，默认是100ms。
如果要修改滚动条的默认样式可以打开jquery.jscrollpane.css文件修改