超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar

た入场券 2022-03-30 08:25 272阅读 0赞

日期：2013-2-16  来源：[GBin1.com][]

[![超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar][jQuery_ - Perfect Scrollbar]][jQuery_ - Perfect Scrollbar_jQuery_ - Perfect Scrollbar]

[在线演示][Link 1]

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

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

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

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

## 主要特性： ##

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

## 使用要求： ##

*  必须有一个内容元素
 *  容器必须拥有一个'position'的CSS样式定义
 *  滚动条的position必须是'absolute'
 *  scrollbar-x必须拥有一个bottom的样式定义，scrollbar-必须有一个'right'的样式定义

## 如何使用： ##

HTML代码

javascript

$('#Demo').perfectScrollbar();

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

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

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

$('#Demo').perfectScrollbar('destroy');

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

$("#Demo").scrollTop(0); 
    $("#Demo").perfectScrollbar('update');

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

via [ gbtags ][Link 1]

来源：[超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/jquerynews/20130216-jquery-plugin-perfect-scrollbar/
[jQuery_ - Perfect Scrollbar]: http://www.gbin1.com/technology/jquerynews/20130216-jquery-plugin-perfect-scrollbar/title.jpg
[jQuery_ - Perfect Scrollbar_jQuery_ - Perfect Scrollbar]: http://www.gbin1.com/technology/jquerynews/20130216-jquery-plugin-perfect-scrollbar/index.html
[Link 1]: http://gbin1.com/gb/share/387.htm
[jQuery_jScrollPane_Mac OSX Lion]: http://www.gbin1.com/technology/jquerytutorial/20120629create-mac-lion-scroll-bar/
[Apple - OS X Lion_jQuery_- lionbars]: http://www.gbin1.com/technology/jquerynews/20120413jquerypluginlionbars/
[jquery-mousewheel]: http://gbin1.com/gb/editpost.htm?postid=387#github.com/brandonaaron/jquery-mousewheel