超棒的自定义超酷滚动条jQuery插件 – Perfect Scrollbar详解编程语言

可能大家厌倦了千篇一律的页面滚动条，如果你希望能够设计出与众不同的页面UI设计的话，Perfect ScrollBar可能就是你寻找的解决方案。

这个滚动条来自于一个个人项目，一个简单但是非常棒的滚动条设计。当然这里也有其它的解决方案，如果你有兴趣也可以阅读：

使用jQuery插件jScrollPane开发Mac OSX Lion风格的滚动条

一个仿Apple OS X Lion操作系统风格的滚动条jQuery插件- lionbars

主要特性： 不需要修改任何的元素的css 滚动条不影响最初的页面布局设计 滚动条支持完整的自定义 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化 依赖于jQuery和相关几个类库 不需要定义宽度和高度。它会固定在容器的右下 你可以修改任何滚动条的样式，不依赖于其它脚本 滚动条支持 update 方法。如果你需要修改滚动条的位置和大小，只需要调用这个方法即可 不使用 scrollTop 和 scrollLeft ，不是用任何绝对定位 使用要求： 必须有一个内容元素 容器必须拥有一个 position 的CSS样式定义 滚动条的position必须是 absolute scrollbar-x必须拥有一个bottom的样式定义，scrollbar-必须有一个 right 的样式定义 如何使用：

HTML代码

 style #Demo { position: relative; } /style div id=Demo div ... /div /div 

javascript

$(#Demo).perfectScrollbar();

如果容器大小或者位置变化了，调用如下方法即可：

$(#Demo).perfectScrollbar(update);

如果你需要销毁，调用如下：

$(#Demo).perfectScrollbar(destroy);

如果你需要滚动到某一个特定位置，调用如下：

$("#Demo").scrollTop(0); 

$("#Demo").perfectScrollbar(update);

如果你需要支持鼠标滚轮支持，请包含这个插件： jquery-mousewheel，它能够帮助你添加鼠标滚轮支持。

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/15821.html

cjavamac