Antiscroll 滚动条插件

       Antiscroll是一个自定义滚动条的插件，能够跨浏览器使用，显示效果为OSX Lion风格，轻量级的网页开发插件，大小只有1KB左右，支持多个浏览器显示效果，动画采用CSS3动画，显示性能流程优异，Antiscroll解决了开发网页中，JavaScript UI通常会面临的一个问题，我如何自定义滚动条，从而保持他已有的特性。

特点

• 支持鼠标的滑轮mousewheels，触摸板和其他输入设备
• 压缩版本只有1KB左右大小
• 没有使用其他任何多余的DIV，代码简洁高效
• 淡入/淡出的CSS3动画控制。
• 鼠标悬停或者触摸才会显示滚动条，最大限度的显示内容
• 支持滚动条拖动
• 根据容器的大小，自动调节滚动条的位置和长度
• 支持IE7，Firefox 3，Chrome，Safari，Opera

使用方法

1、在网页的顶部引入样式

1. <link href="antiscroll.css" rel="stylesheet" />

2、在网页的底部引入JS文件，这个插件依赖于jQuery框架和jquery-mousewheel.js文件

1. <script src="deps/jquery.js" type="text/javascript"></script>
2. <script src="deps/jquery-mousewheel.js" type="text/javascript"></script>
3. <script src="antiscroll.js" type="text/javascript"></script>

3、给外层的DIV盒子添加antiscroll-inner样式，给内容的盒子添加antiscroll-wrap样式，调用插件

1. $(function () {
2.     $('.antiscroll-wrap').antiscroll();
3. });

配置参数

你可以将通过自动滚动条隐藏在一个关键值的antiscroll()像这样：

1. $(function () {
2.     $('.antiscroll-wrap').antiscroll({
3.         autoHide: false
4.     });
5. });

项目地址：https://github.com/LearnBoost/antiscroll

文章转载自：问说网 » Antiscroll跨浏览器自定义OSX Lion滚动条插件