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值调整内容位置