Article Detail

漂亮的虚拟滚动条

插件描述：可自定义程度很高的虚拟滚动条插件，用起来很方便 Basic configuration $(selector).slimScroll(); Examp...

HTML 阅读 46.4万 10 分钟阅读 2016-01-21 17:04

插件描述：可自定义程度很高的虚拟滚动条插件，用起来很方便
Basic configuration

 $(selector).slimScroll();

Example of additional settings

$(function() {
    $(".slimscroll").slimScroll({
        width: 'auto', //可滚动区域宽度
        height: '100%', //可滚动区域高度
        size: '10px', //组件宽度
        color: '#000', //滚动条颜色
        position: 'right', //组件位置：left/right
        distance: '0px', //组件与侧边之间的距离
        start: 'top', //默认滚动位置：top/bottom
        opacity: .4, //滚动条透明度
        alwaysVisible: true, //是否 始终显示组件
        disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
        railVisible: true, //是否 显示轨道
        railColor: '#333', //轨道颜色
        railOpacity: .2, //轨道透明度
        railDraggable: true, //是否 滚动条可拖动
        railClass: 'slimScrollRail', //轨道div类名 
        barClass: 'slimScrollBar', //滚动条div类名
        wrapperClass: 'slimScrollDiv', //外包div类名
        allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
        wheelStep: 20, //滚轮滚动量
        touchScrollStep: 200, //滚动量当用户使用手势
        borderRadius: '7px', //滚动条圆角
        railBorderRadius: '7px' //轨道圆角
    });
});

Events

slimScroll publishes slimscroll event when scrollbar reaches top or bottom of the parent container. You can use jQuery bind method to subscribe to this event:

 $(selector).slimScroll().bind('slimscroll', function(e, pos){
     console.log("Reached " + pos");
 });

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.js"></script>

<!--父层定宽高
<div style="height:100px;width:200px;">
	<div class="slimscroll">				 	我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！
	</div>
</div>
-->
	<div class="slimscroll">				 	我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！我是滚动条！
	</div>
<script>
$(function() {
    $(".slimscroll").slimScroll({
			//没有定宽高父层
		  height: '100px',
		  width: '300px',
		  //父层定宽高
        //width: 'auto', //可滚动区域宽度
        //height: '100%', //可滚动区域高度
        size: '10px', //组件宽度
        color: '#000', //滚动条颜色
        position: 'right', //组件位置：left/right
        distance: '0px', //组件与侧边之间的距离
        start: 'top', //默认滚动位置：top/bottom
        opacity: .4, //滚动条透明度
        alwaysVisible: true, //是否 始终显示组件
        disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
        railVisible: true, //是否 显示轨道
        railColor: '#333', //轨道颜色
        railOpacity: .2, //轨道透明度
        railDraggable: true, //是否 滚动条可拖动
        railClass: 'slimScrollRail', //轨道div类名 
        barClass: 'slimScrollBar', //滚动条div类名
        wrapperClass: 'slimScrollDiv', //外包div类名
        allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
        wheelStep: 20, //滚轮滚动量
        touchScrollStep: 200, //滚动量当用户使用手势
        borderRadius: '7px', //滚动条圆角
        railBorderRadius: '7px' //轨道圆角
    });
});
</script>

演示 http://www.jq22.com/demo/jQuery-slimScroll-141223223505/

附件：

附件下载upload/attach/tbs-Ja9yjBM6yZ.rar

Comments 评论区

广西南宁市 2017-06-17 09:39

修改浏览器滚动条
1、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文件修改

jscrollpane

#⁰

广西南宁市 2017-06-17 09:39

jquery实现的提示浮层跟随鼠标移动

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>jquery实现简单文字提示</title> 
<style type="text/css"> 
#preview{
  background: #000;
  color: #fff;
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 13px;
  display: none;
  position: absolute;
} 
.preview{
    width: 130px;
    height: 40px;
    padding: 0;
    font-size: 14px;
    line-height: 38px;
    color: #333;
    background-color: #fff;
    border: 1px solid #d1d2d3;
    display: inline-block;
    margin: 50px 20px 0;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
}
</style> 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> 
</head> 
<body> 
<a class="preview">把鼠标放到这里1</a> 
<a class="preview">把鼠标放到这里2</a> 
<a class="preview">把鼠标放到这里3</a> 
<a class="preview">把鼠标放到这里4</a> 
<a class="preview">把鼠标放到这里5</a> 
<script type="text/javascript"> 
this.imagePreview = function(){ 
/* CONFIG */ 
xOffset = 25; 
yOffset = 15; 
// 可以自己设定偏移值 
/* END CONFIG */ 
$("a.preview").hover(function(e){ 
$("body").append("<div id='preview'>jquery实现简单文字提示</div>"); 
$("#preview") 
.css("top",(e.pageY - xOffset) + "px") 
.css("left",(e.pageX + yOffset) + "px") 
.fadeIn("slow"); 
}, 
function(){ 
$("#preview").fadeOut("fast"); 
}); 
$("a.preview").mousemove(function(e){ 
$("#preview") 
.css("top",(e.pageY - xOffset) + "px") 
.css("left",(e.pageX + yOffset) + "px"); 
}); 
}; 
// 页面加载完执行 
$(document).ready(function(){ 
imagePreview(); 
}); 
</script> 
</body> 
</html>

#⁰

广西南宁市 2017-11-03 17:34

div隐藏滚动条仍保留滚动效果，兼容IE，FF，Webkit 和 O

/*webkit内核*/
.scroll_content::-webkit-scrollbar {
    width:0px;
    height:0px;
}
.scroll_content::-webkit-scrollbar-button    {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track     {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-track-piece {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-corner {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar-resizer  {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-webkit-scrollbar {
    width:10px;
    height:10px;
}
/*o内核*/
.scroll_content .-o-scrollbar{
    -moz-appearance: none !important;   
    background: rgba(0,255,0,0) !important;  
}
.scroll_content::-o-scrollbar-button    {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-track     {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-track-piece {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-thumb{
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-corner {
    background-color:rgba(0,0,0,0);
}
.scroll_content::-o-scrollbar-resizer  {
    background-color:rgba(0,0,0,0);
}
/*IE10,IE11,IE12*/
.scroll_content{
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
    overflow: auto;
}

<script src="lib/jquery.min.js"></script>
<script src="lib/jquery.nicescroll.min.js"></script>
$(function(){
    //FF下用JS实现自定义滚动条
    $(".scroll_content").niceScroll({cursorborder:"",cursorcolor:"rgba(0,0,0,0)",boxzoom:true});
})

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。