完美的滚动条是一个轻量级的jQueryJavaScript插件，允许您在不更改或添加任何原始元素样式的情况下美化默认滚动条。

有了完美的滚动条插件，您页面上的滚动条可以完全自定义并灵活地满足您的需求

您可能还喜欢：

• 自定义滚动条的jQuery插件-滚动框
• jQuery自定义滚动条插件-malihu
• 响应式浏览器滚动条替换插件-ClassyScroll
• 类似Facebook的jQuery滚动条插件-slimScroll
• nanoScroller-Mac OS X Lion风格的滚动条

如何使用它:

1.在文档中包含完美滚动条的CSS文件。

<link href="min/perfect-scrollbar.min.css" rel="stylesheet">

2.HTML结构。

<div id="demo">
  <div class="content"> </div>
</div>

3.在页面底部包含必要的javascript文件。

<script src="min/perfect-scrollbar.min.js"></script> 

4.调用顶部容器上的插件并完成。

new PerfectScrollbar('#demo', {
    // options here
});

5.选项和默认值。

new PerfectScrollbar('#demo', {
 
    // A list of handlers to scroll the element.
    handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'],
 
    // This sets threshold for ps--scrolling-x and ps--scrolling-y classes to remain. In the default CSS, they make scrollbars shown regardless of hover state. The unit is millisecond.
    scrollingThreshold: 1000,
 
    // The scroll speed applied to mousewheel event.
    wheelSpeed: 1,
 
    // If true, when the scroll reaches the end of the side, 
    // mousewheel event will be propagated to parent element.
    wheelPropagation: false, 
 
    // When set to an integer value, the thumb part of the scrollbar
    // will not shrink below that number of pixels.
    minScrollbarLength: null,
 
    // When set to an integer value, the thumb part of the scrollbar 
    // will not expand over that number of pixels.
    maxScrollbarLength: null, 
 
    // When set to true, and only one (vertical or horizontal) scrollbar
    // is visible then both vertical and horizontal scrolling will affect the scrollbar.
    useBothWheelAxes: false, 
 
    // When set to true, the scroll bar in X axis will not be available, 
    // regardless of the content width.
    suppressScrollX: false, 
 
    // When set to true, the scroll bar in Y axis will not be available, 
    // regardless of the content height.
    suppressScrollY: false, 
 
    // true: swipe scrolling will be eased
    swipeEasing: true,
 
    // The number of pixels the content width can surpass the 
    // container width without enabling the X axis scroll bar. 
    scrollXMarginOffset: 0, 
 
    // The number of pixels the content height can surpass the 
    // container height without enabling the Y axis scroll bar. 
    scrollYMarginOffset: 0
 
});

6.事件处理程序。

// fired when the x-axis is scrolled in either direction
container.addEventListener('ps-scroll-x', () => ...);
 
// fired when the y-axis is scrolled in either direction
container.addEventListener('ps-scroll-y', () => ...);
 
// fired when scrolling upwards
container.addEventListener('ps-scroll-up', () => ...);
 
// fired when scrolling downward
container.addEventListener('ps-scroll-down', () => ...);
 
// fired when scrolling to the left
container.addEventListener('ps-scroll-left', () => ...);
 
// fired when scrolling to the right
container.addEventListener('ps-scroll-right', () => ...);
 
// fired when scrolling reaches the start of the x-axis.
container.addEventListener('ps-x-reach-start', () => ...);
 
// fired when scrolling reaches the end of the x-axis
container.addEventListener('ps-x-reach-end', () => ...);
 
// fired when scrolling reaches the start of the y-axis.
container.addEventListener('ps-y-reach-start', () => ...);
 
// fired when scrolling reaches the end of the y-axis (useful for infinite scroll)
container.addEventListener('ps-y-reach-end', () => ...);

更多示例：

• 默认示例
• 车轮速度示例
• 车轮传播示例

更新日志：

v1.5.5 (2022-03-24)

• 错误修复

v1.5.3 (2021-10-25)

• 删除嵌套和单行条件

v1.5.2 (2021-07-19)

• 使现代化

v1.5.1 (2021-05-04)

• 修复：滚动条持续向下滚动超过内容长度
• 修复：“无法读取null的属性”scrollTop“”

v1.5.0 (2020-01-16)

• 使用汇总重新创建生成工具
• 已将所有依赖项更新为最新版本
• 从Travis CI切换到GitHub操作
• 增加了可靠度，使我们的依赖关系保持最新
• 固定RTL支持
• 修正了mouse-wheel.js中的shouldBeConsumedByChild逻辑
• 改进了与父类的兼容性
• 在类型定义中添加了缺少的属性
• 增加了对滚动元素的分数大小的支持
• 增加了对触摸设备的支持
• 增加了对移动设备的拖动支持

v1.4.0 (2019-12-03)

• 支持滚动元素的小数大小
• 修正了无法通过触摸滚动的问题

v1.4.0 (2018-06-07)

• 使现代化

2018-04-09

• 拖动时不要收缩滚动条

v1.3.2 (2017-12-01)

• 使现代化

版本0.5.8（2014-12-02）

• 使现代化

版本0.5.7（2014-11-06）

• 使现代化

版本0.5.6（2014-10-29）

• 更改滚动条轨道的隐藏方式。

版本0.5.5（2014-10-24）

• 过滤不处理的触摸事件。

版本0.5.4（2014-10-22）

• 停止传播并防止触摸事件的默认设置。

版本0.5.3（2014-10-14）

• 与iframes兼容。
• 添加int（）helper而不是parseInt。

版本0.5.2（2014-9-28）

• 使现代化

版本0.5.1（2014-9-16）

• Firefox和IE 10的鼠标滚轮修复程序。

版本0.4.11（2014-8-25）

• 删除jquery鼠标滚轮依赖项。

版本0.4.10（2014-4-28）

• 使现代化

版本0.4.9（2014-4-2）

• 使现代化

版本0.4.8（2014-1-22）

• 修复了滚动条轨道在不应该显示时显示的错误。

版本0.4.7（2014-1-21）

• 添加一个关于回调的示例，以检查回调是否到达末尾。

版本0.4.6（2013-12-6）

• 添加滚动抑制功能的示例。

版本0.4.5（2013-10-1）

• 在滚动条轨道上添加点击处理程序以滚动到该位置。
• 添加“useBothWheelAxes”选项的示例。
• 实现键盘滚动。

版本0.4.4（2013-9-9）

• 已更新到最新版本

版本0.4.1（2013-5-18）

• 代码重构。

版本0.3.4（2013-5-18）

• 代码重构。

版本0.3.3（2013-3-14）

• 功能更新。

版本0.2.5（2013-2-8）

• 错误修复。
• 包括带有jquery鼠标滚轮的最低版本。

 

预览截图

美化滚动条 微小JavaScript插件 完美 滚动条