JustYeh的前端博客

滚动条美化插件Perfect Scrollbar

2017-07-10

插件scroll

Perfect Scrollbar 是一个轻量级的(~14KB)的 jQuery插件,能够帮助你轻松创建出自定义风格的滚动条。 它不会影响默认的布局,也不需要任何任何的 CSS 修改,该插件适用于任何大小的容器,并重新安排位置,如果容器大小发生变化会自动调整位置。 此外,滚动条的风格可以完全通过 CSS 定制,另外还支持鼠标滚轮插件 – jquery-mousewheel

在线demo

特性

  • 不需要修改任何的元素的css
  • 滚动条不影响最初的页面布局设计
  • 滚动条支持完整的自定义
  • 滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化
  • 不需要定义宽度和高度。它会固定在容器的右下
  • 你可以修改任何滚动条的样式,不依赖于其它脚本
  • 不使用'scrollTop'和'scrollLeft',不使用任何绝对定位

使用案例

使用要求

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

API介绍

Scrollbar插件是一个开源项目,这里是项目git主页

初始化插件

这个是最基础的用法

$('#container').perfectScrollbar();// Initialize

初始化(带有选项)

在实例化的时候你也可以附带一些选项

$('#container').perfectScrollbar({// with options
wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20
});  

更新

如果容器大小或者位置变化了,你可以update插件

$('#container').perfectScrollbar('update');  // Update

销毁 如果你不再需要scrollbar效果,你可以destroy插件

$('#container').perfectScrollbar('destroy'); // Destroy

定位 如果你需要滚动到某一个特定位置,使用scrollTop方法,然后update就可以了

$('#container').scrollTop(0);
$('#container').perfectScrollbar(‘update’);