什么是 custom-scrollbar？
custom-scrollbar 是一个基于 jQuery 的自定义滚动条插件，可以让浏览器中的滚动条变得更加美观、易于定制，兼容主流浏览器，支持鼠标滚轮、拖动滑块等交互方式。
如何安装 custom-scrollbar？
你可以通过 npm 的方式进行安装：
--- ------- ---------------- ------
在使用之前需要先引入 jQuery：
------ - ---- --------- ------ -------------------
或者直接在 HTML 中使用 script 标签引入：
------- ---------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------------------------------------------
如何使用 custom-scrollbar？
---- ------------------
---- ----------------
---- -- ---
------
---------------- - ------- ------ ----------- ----- -- -------- -- - -------- - ------- ------ -
----------------------------------
基本配置选项
autoUpdate: 是否自动更新插件的样式，默认为true。updateOnWindowResize: 是否在窗口大小变化时更新插件的样式，默认为false。disableResizeVertical: 是否禁止垂直尺寸大小调整，默认为false。disableResizeHorizontal: 是否禁止水平尺寸大小调整，默认为false。scrollx: 是否启用水平滚动条，默认为false。scrolly: 是否启用垂直滚动条，默认为true。scrollInertia: 滚动惯性系数，取值为0~`1，默认为0.85`。scrollEasing: 滚动动画效果，可选值有linear和easeOutQuad，默认为easeOutQuad。thumbSize: 滑块的最小长度或宽度，取值为像素值，默认为20。thumbOpacity: 滑块的透明度，取值为0~`1，默认为1`。zIndex: 滑块的 z 轴层级，取值为整数，默认为auto。
示例代码
---- --------------------
---- ----------------------------
---
------
------
---- --------------------
---- ----------------------------
---
------
------------------ - ------- ------ ----------- ----- - -------------------- - ------- ------ - ------------ - ------ ------ ----------- ----- - -------------------- - ------ ------ -
----------------------------------- -------- ------ -------- ---- --- ----------------------------------- -------- ----- -------- ----- ---
总结
custom-scrollbar 可以方便地为网页添加自定义滚动条，使得浏览器中的滚动条更加美观、易于定制。需要注意的是，自定义滚动条也有一些缺点，如可能增加网页的加载时间、可能产生兼容性问题等，所以在使用时需要慎重考虑。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005663f81e8991b448e2490