自定义滚动条插件--mCustomScrollbar

RT.

插件官方网址:http://manos.malihu.gr/jquery-custom-content-scroller/

中文翻译网址:http://www.qianxingzhem.com/post-1602.html

下载完成之后,直接按照官方的指导就能够很好的实现自定义滚动条啦.具体参见中文的翻译.

另外,我想指出我实际使用之中的几个问题:

1.不兼容IE7,在IE7下会在滚动条左侧出现一个小黑线

   经过测试,在IE7文档模式下会出现滚动条左侧出现小黑线,经过排查,是这个插件在自动加载节点时会给类名mCSB_container的div盒子赋值一个样式,这个样式其实对于整个滚动条的帮助是不大的.所以这里我直接进入到jquery.mCustomScrollbar.css样式中,将其删除到只剩下:

overflow: hidden;
width: auto;
height: auto;

2.实现加载时滚动到一个固定位置

当然,在仔细阅读了文档之后我才知道插件本身提供了$(selector).mCustomScrollbar(“scrollTo”,position);这个方法能够快捷滚动到主体的一个位置上去.但接下来还是讲讲我的思路:

获取到被滚动内容的top值,然后设置其top值大小.由于插件对top值的设置是直接在html标签中的style属性中设置的,通过jquery的$(seletor).attr({style:value});来设置.这个语句写在$(window).load(function());里面,当文档元素加载完毕之后执行,也可以放在任何你想要调整滚动条位置的地方.

 var c = b+"px";
 var d = "position:relative; top:-"+ c +"; left:0;";
 $("#mCSB_1_container").attr({style:d}); //设置top值调整内容位置