在前端开发中，滚动条是常见的组件，它可以帮助用户浏览长篇内容或者查看列表数据。但很多时候浏览器原生滚动条的样式和交互效果都不够好，因此我们需要使用第三方库来实现更好的滚动条组件。其中，@better-scroll/scroll-bar 是一个比较好用的滚动条库，下面让我们一起来学习它的使用方法。
安装
首先，在你的前端项目中通过 npm 安装 @better-scroll/scroll-bar:
npm install @better-scroll/scroll-bar --save
引入组件
在需要使用滚动条的页面中引入组件：
import BScroll from '@better-scroll/core' import ScrollBar from '@better-scroll/scroll-bar' BScroll.use(ScrollBar)
配置项
配置项包括几个方面：
- fade：是否淡入淡出（Boolean，默认 true）
- interactive：滚动条是否可交互（Boolean，默认 true）
- scrollbarMinLength：滚动条的最小长度（Number，默认为 30）
- scrollbarMaxLenhth: 滚动条的最大长度（Number，默认为无限）
- scrollX：是否是横向滚动条（Boolean，默认为 false）
-- -------------------- ---- -------
----- -------- - --- ------------------ -
---------- -
----- -----
------------ -----
------------------- ---
------------------- ---------
-------- -----
-
--滚动条事件
- scrollbarDragStart: 滚动条开始拖动
- scrollbarDragMove: 滚动条正在被拖动
- scrollbarDragEnd: 滚动条结束拖动
-- -------------------- ---- ------- --------------------------------- -- -- - ----------------- ------- -- -------------------------------- ---------- -- - ----------------- ------ --------- -- ------------------------------- -- -- - ----------------- ----- --
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------- ------------
-------
-----
---- -
------- --
-------- --
------- -----
-
-------- -
------- -----
--------- -------
-
----- -
--------- -------
-
--------
-------
------
---- -------------
---- ----------
--------- ----------
-------- ----- ----- --- ----- ----------- ---------- ----- ----- ------- ------ ---- ---------- -------- ------ ------ --------- ----- -- --------- ----- ------- --- ----- ------ ------- ---- -- --------- ---- ---- ------ --------- -------- ---- --- ------ ------ --------- ---- ------ ------- -- --- ---- -------- ------- ------- ------ ---- ----- --------- --- ---- ---- ------- ------- ----- ----- --------- ------- ---- --- ----------------
----------- ---- ----- ------- -- ---- --- ----- ------- -------- ------ ---- -- --- -- ----- -------- --------- --------- ------- --- --- ---- ------- --------- ------- ---- --------- ----- ------- ------ ----- ---- ----- --------- --- --------- ----- ------ ---- ------- --- ---- -- ---------- ------------ -- ---- ------ ------- ------- -- ---- --- ------- ------ --------- --- --- ------- ------- ----- --- ---- ----------- -- ------ -- ----- ------- ----- -- ------ ---------- -- ------- ----- -------- ------ -------- ---- ------- ----- ------------- - --------- --- --------- --- ---- ----- -- ---- --------- ---------- -- -- ------ ---------
------------- ---------- ----- ---- -------- -------- ------ ----- ----------- ------- ----- -------- ------ ----- --- ----- ----- ---- ---- ----- ---- -- --------- ---- ---------- --- ------ --- ----- ----------- ------- ------- ---- -- --- ----- ------- ----------- ---------- --- ---- ----- ----- ------ ------- --- ----- ----- --- ------- ---- ----- ---- ------- ---- ----------- ---------
--------- -- ----- ------- ----- ------ ---- -- ----------- ------- --- --------- ----- ---------- ----------- ----- --- -------- ------ ----- -------- ---- ------- ---- -------- ----- -------- ----- ----------- -------- ------- ------- --- ----- -- ------------ - -------- ---- --------- ----- --------- ----- ------ ----- --- -------- ---------- ------------ ---------- ---- --- ---- -------- --------- ------ ----- ------ ----- --- ------- ---- ----- -- ---------
----- --------- --------- ------ -- -------- ------ --------- --- ----- --------- -- ----- --- ---- ----- ------------ ---------- -- ------- -------- ------ ------ ----- ------- --------- --- -- --- --------- --------- ----- -------- ------- --------- ----- -- -------- --------- -------- --- ---- -------- ---------- ----- ------ ---------- ------ --- -------- ----- ---- ----- -----------
---------- --------- -------- ----- -- ------- ----- ------- ------ ------- --- --------- ---- --------- ---- ----- ------ --- ----- ------ ------ ------- ------ ----- ------ ------ -------- -- ------ -------- --- ------- ------- --- -------- ---------- -- -------- ---- -------- ----- --------- -- --------- ----- ---------- ------- ----------- ------- ------ --- ----- ----- --------- --- ------ --- --------- --------- ----- ----- -- ------------ -----------
--------- ------------ ----- -- -------- -------- ------ ------ ------ ----- -- -------- ------ ------ -- --- ----- ----- -------- ------- ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ -------- ------- ----- --- ------- ---- --------- ------ --------- ----- ----- ----- -- --- ------- -------- ----- --- -------- ---- --- ------- --- --- ---- ------- ---- ------- ----- ------- ---------- ---- ------- -------- -- --- ---- --------- --------- ----- ---- -------- ------ -- --------- --------- ---- ----- ------- ----- ------- ------ ---- ------ -- ----- ------- ---- -------------
--------- --------- ----------- -- --- -------- ----- --------- ----------- ------- -- ----- --- ---------- -- ------- ------ ----- -- -------- ---- ------- ---- -------- --- ------ --- ----- ------- ----------- ----- --------- ----------- --------- ----- --------- --------- ----- ---- ------- ----- ------ ---- ----- ----- -------- ---------- ---- -------- ------ - ------- ---------- -- ------- ---- ------ ---- -- ------ ---- ----- --------- -------- --- -- ----------
------
------
------- --------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
--------
----- -------- - --- ------------------- -
---------- -
----- -----
------------ -----
------------------- ---
------------------- ---------
-------- -----
-
--
--------------------------------- -- -- -
----------------- -------
--
-------------------------------- ---------- -- -
----------------- ------ ---------
--
------------------------------- -- -- -
----------------- -----
--
---------
-------
-------以上就是 @better-scroll/scroll-bar 的使用教程。通过这个库，我们可以非常方便地实现自定义滚动条功能，为用户提供更好的浏览体验。压缩后的生产版本 BScroll.min.js 和 ScrollBar.min.js 可以直接放到静态资源服务器上使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6e9999a9b7065299ccb9f8