jQuery-slimScroll控制滚动条样式的插件

2019独角兽企业重金招聘Python工程师标准>>>

    jQuery-slimScroll控制滚动条样式的插件功能比较简单，但是插件的大小只有6kb，相对于mCustomScrollbar来说就小的很多了。但是相对于mCustomScollbar的功能来说，jQuery-slimScroll就比较简单了。jQuery-slimScroll检测在IE9以上才能正常使用，IE9以下显示正常的滚动条。接下来介绍下jQuery-slimScroll的使用。

    HTML代码

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.p>

    
Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.p>
    
    
Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.p>

    
Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.p>

    
Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.p>

 CSS样式

.container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* 让它显示滚动条 */
}

    在html代码中引用jquery.min.js 和 slimscroll.js两个文件，并且slimscroll.js依赖于jquery.js

   js代码

$(".container").slimScroll({
	width:"300px",  
	height: '500px',
	alwaysVisible: false,
	});

添加这段js代码以后，会给$(".container")这个元素动态添加一个class="slimScrollDiv"的父元素。父元素和子元素的宽高都会设置一样的，如果你要针对父元素这只样式，那么你css中添加对.slimScrollDiv的样式就可以。

介绍下slimscroll

$(selector).slimScroll({
    width: '300px',//可见的滚动区域的宽度。若未设置拉伸至父元素。默认值：none
    height: '500px',//可见g滚动区的高度。还支持自动设置的高度和父容器相同。默认：一切
    size: '10px', //在滚动条的像素宽度。默认值：7px
    position: 'left',//左或右。设置滚动条的位置。默认值：对
    color: '#ffcc00',//在滚动条颜色。#默认：000000
    alwaysVisible: true,//滚动条是否总是可见
    distance: '20px',  //距离在父元素边应该出现在滚动条。它与位置属性一起使用(距离左右的距离)。默值：1px
    start: $('#child_image_element'),//自定义滚动条刚开始的位置，可以是px,也可以是一个元素
    railVisible: true,//滚动条的轨道是否可以见  默认：false
    railColor: '#222',//滚动条轨道的颜色 默认：#333333
    railOpacity: 0.3,//滚动条轨道的透明度 默认: false
    wheelStep: 10,//鼠标滚动的偏移量。默认：20
    allowPageScroll: false, //当滚动区域滚到顶部或者底部的时候，是否滚动页面。 默认false。
    disableFadeOut: false //禁用滚动条自动消失。当设置为真实的滚动条不消失一段时间当鼠标在slimscroll div后 });
   其他的几个参数：
scrollTo - 滚动到指定位置. Example: $(element).slimScroll({ scrollTo: '50px' });

scrollBy - 滚动多少距离，Example: $(element).slimScroll({ scrollBy: '60px' });

touchScrollStep - 调触摸滑动的灵敏度.Default: 200

Events:当滚动条滑动条父容器的顶部或底部的时候，你可以绑定事件：
$(selector).slimScroll().bind('slimscroll', function(e, pos){
    console.log("Reached " + pos");
});

如果你需要更多，更好的滚动条样式的支持，可以是考虑使用:mCustomScollbar.js .如果仅仅是简单使用，具体了解：http://rocha.la/jQuery-slimScroll

转载于:https://my.oschina.net/u/2321816/blog/604065