自定义滚动条API.doc

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法 开源程序 2013年01月04日 文章目录[隐藏] 关于 mCustomScrollbar 如何使用 mCustomScrollbar mCustomScrollbar 的参数介绍 mCustomScrollbar 的使用方法 mCustomScrollbar的原理 定义滚动条外观 更加进阶的使用：修改浏览器的滚动条 WPJAM TOC 如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个：jScrollPane?和?mCustomScrollbar。 关于 jScrollPane，大家见过的可能比较多，但是这个插件太过于古老而且功能不强大，效果在几年前非常不错，但是放在现在就不好说了。所以我选择了后者：mCustomScrollbar。下图是两者官方示例的简单对比： 本文就是介绍如何使用 mCustomScrollbar 这个插件，大部分的内容是翻译自?mCustomScrollbar 官方的介绍页面，但是根据自己的理解做了部分的调整和修改，同时增加一些自己在使用中的一些技巧。 关于 mCustomScrollbar mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义网页的滚动条，并且垂直和水平两个方向的滚动条都可以定义，它通过?Brandon Aaron jquery mouse-wheel plugin?提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等。总之，你知道非常好用就是了，:-) 下载?|?演示 如何使用 mCustomScrollbar mCustomScrollbar 这个插件的下载包里面包含了所有的插件文件和一些例子。其中以下的四个文件时必须要上传到服务器上： jquery.mCustomScrollbar.js jquery.mousewheel.min.js jquery.mCustomScrollbar.css mCSB_buttons.png 第一步：加载 mCustomScrollbar 的样式文件。 通过下面的代码，引入插件包中的 jquery.mCustomScrollbar.css 样式表文件。 link href=jquery.mCustomScrollbar.css rel=stylesheet type=text/css / 第二步：加载必须的 JS 文件。 需要加载的文件有如下几个：jQuery、jQuery UI， jquery.mousewheel.min.js 和 jquery.mCustomScrollbar.js 这四个。 jQuery 和 jQuery UI 是必须的， jquery.mousewheel.min.js 是用来提供滚动支持的，jquery.mCustomScrollbar.js 则是插件的主文件。 *注：加载顺序也要按照上面代码的顺序，如果不注意加载的顺序，可能会导致失败，原因请看本人的：网页中代码的顺序是不可忽略的细节。 script src=/ajax/libs/jquery/1.7/jquery.min.js/script script src=/ajax/libs/jqueryui/1.8/jquery-ui.min.js/script script src=jquery.mousewheel.min.js/script script src=jquery.mCustomScrollbar.js/script 可以把这段代码放在文档的底部来缩短加载网页内容的时间。这里使用了 Google 的 CDN 加速服务来加载 jQuery 和 jQuery UI，当然你也可以把这两个库上传到自己的服务器上。另外注意下 jQuery UI 这个插件被作者精简了，只包含这个插件必须的模块，大小也只有 43KB。 如果当你在使用类似 Google 或者 Sina 的常用 Javascript 库的加速服务的话，更推荐采用下面的这种 fallback 的写法，如果 CDN 的 JavaScript 代码没有加载成功，就会引用本地的库，而不会导致插件无法使用： script src=/ajax/libs/jquery/1.7/jquery.min.js/script script!window.jQuery document.write(unescape(%3Cscript src=jquery/jquery-1.7.2.min.js%3E%3C/script%3E)