2023年6月20日发(作者:)
⾃定义滚动条mCustomScrollbarmCustomScrollbar 是个基于 jQuery UI 的⾃定义滚动条插件,它可以让你灵活的通过 CSS 定义⽹页的滚动条,并且垂直和⽔平两个⽅向的滚动条都可以定义,它通过 BrandonAaron jquery mouse-wheel plugin 提供了⿏标滚动的⽀持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以⾃动调整滚动条的位置和定义滚动到的位置等。(HTML必须存在于⽂档流, 不能为display:none)
1.如何使⽤ mCustomScrollbar(必须要加载如下的4个⽂件)B_
jQuery:这个插件的必备库jQuery UI:扩展 jQuery 库并且为我们的滚动条提供了简单的动画和拖动功能。:这是 Brandon Aaron 编写的⼀个伟⼤的只有2kb的插件,它⾯向所有的操作系统和浏览器,为我们提供了⿏标滚动事件的⽀持。:这是我们的插件主⽂件。在插件包的 minified 你可以找到它的压缩版。: 这个 CSS ⽂件是让我们来定义边栏⽤的。你可以在这个⽂件中定义你的边栏,当然你可以在其他的 CSS ⽂件中定义,要注意的是,你要⽤CSS 中的顺序,其中的优先级关系来覆盖这个⽂件中的定义。mCSB_: 这个 png 图⽚⽂件,包含了向上向下向左向右滚动的按钮。可以使⽤ CSS sprites 技术,来使⽤这个图⽚中的相应按钮。插件包中包含了这个图⽚的 PSD源⽂件(sources/mCSB_ ),你可以根据⾃⼰的需求⾃定义。其实如果只是简单的滚动条,只要加载如下2个⽂件即可第⼀步:加载 mCustomScrollbar 的样式⽂件。
第⼆步:加载必须的 JS ⽂件。需要加载的⽂件有如下⼏个:jQuery、jQuery UI, 和 这四个。jQuery 和 jQuery UI 是必须的, 是⽤来提供滚动⽀持的, 则是插件的主⽂件。