什么是 custom-scrollbar？
custom-scrollbar 是一个基于 jQuery 的自定义滚动条插件，可以让浏览器中的滚动条变得更加美观、易于定制，兼容主流浏览器，支持鼠标滚轮、拖动滑块等交互方式。
如何安装 custom-scrollbar？
你可以通过 npm 的方式进行安装：
npm install custom-scrollbar --save
在使用之前需要先引入 jQuery：
import $ from 'jquery'; import 'custom-scrollbar';
或者直接在 HTML 中使用 script 标签引入：
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@krystal/custome-scrollbar@2.13.0/dist/jquery.custom-scrollbar.min.js"></script>
如何使用 custom-scrollbar？
<div class="scrollbar">
<div class="content">
<!-- 内容 -->
</div>
</div>.scrollbar {
height: 300px;
overflow-y: auto; /* 隐藏原始的滚动条 */
}
.content {
height: 500px;
}$('.scrollbar').customScrollbar();基本配置选项
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