Antiscroll是一个自定义滚动条的插件,能够跨浏览器使用,显示效果为OSX Lion风格,轻量级的网页开发插件,大小只有1KB左右,支持多个浏览器显示效果,动画采用CSS3动画,显示性能流程优异,Antiscroll解决了开发网页中,JavaScript UI通常会面临的一个问题,我如何自定义滚动条,从而保持他已有的特性。
特点
- 支持鼠标的滑轮mousewheels,触摸板和其他输入设备
- 压缩版本只有1KB左右大小
- 没有使用其他任何多余的DIV,代码简洁高效
- 淡入/淡出的CSS3动画控制。
- 鼠标悬停或者触摸才会显示滚动条,最大限度的显示内容
- 支持滚动条拖动
- 根据容器的大小,自动调节滚动条的位置和长度
- 支持IE7,Firefox 3,Chrome,Safari,Opera
使用方法
1、在网页的顶部引入样式
- <link href="antiscroll.css" rel="stylesheet" />
2、在网页的底部引入JS文件,这个插件依赖于jQuery框架和jquery-mousewheel.js文件
- <script src="deps/jquery.js" type="text/javascript"></script>
- <script src="deps/jquery-mousewheel.js" type="text/javascript"></script>
- <script src="antiscroll.js" type="text/javascript"></script>
3、给外层的DIV盒子添加antiscroll-inner
样式,给内容的盒子添加antiscroll-wrap
样式,调用插件
- $(function () {
- $('.antiscroll-wrap').antiscroll();
- });
配置参数
你可以将通过自动滚动条隐藏在一个关键值的antiscroll()
像这样:
- $(function () {
- $('.antiscroll-wrap').antiscroll({
- autoHide: false
- });
- });
项目地址:https://github.com/LearnBoost/antiscroll
文章转载自:问说网 » Antiscroll跨浏览器自定义OSX Lion滚动条插件