简介
react-custom-scrollbars-patched 是一个 React 的自定义滚动条组件，相比于默认浏览器滚动条，它可以支持更好的定制化和样式设计。本文将介绍如何使用这个 npm 包来实现更好的滚动条效果。
安装
在项目中使用 npm 安装 react-custom-scrollbars-patched：
npm i react-custom-scrollbars-patched
示例
具体使用方法可以在 Github 上的官方示例 中了解，这里只给出一个简要的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ----------------------------------
----- ------- - -- -- -
------ -
----------- -------- ------ ---- ------- --- ---
---- -------- ------ ------- ------- ---- ----------------
-------------
--
-
------ ------- --------在这个例子中，我们使用了一个 Scrollbars 组件来包含一个高度超过父容器高度的 div，就像默认的滚动条一样，当 div 的高度超过容器高度时会出现纵向滚动条。
定制化
scrollbars 可以很容易地进行样式定制化。在 Scrollbars 组件中，我们可以传递自定义样式对象。
比如，我们可以用下面这个样式对象来尝试将滚动条改为红色：
-- -------------------- ---- -------
----- ----------- - -
------ -
---------------- -----
--
------ -
---------------- --------
-
-
----- ------- - -- -- -
------ -
----------- -------- ------ ---- ------- --- -- ----------------------- ----- -- -- ---- -------- --------- ---------------- ------- -- ----
---- -------- ------ ------- ------- ---- ----------------
-------------
--
-其中，track 指的是滚动条轨道的样式，thumb 指的是滚动条滑块的样式。由于我们只想改变滑块颜色，我们只设置了 thumb 样式对象。
上述代码中的 renderThumbVertical 是用来渲染或者覆盖默认的滑块组件的，也就是说，你可以自己写一个自定义的滑块来替换默认的滑块。
总结
本文介绍了如何使用 react-custom-scrollbars-patched 这个 npm 包来实现更好的滚动条效果。我们给出了一个简单的示例和如何进行定制化操作。希望这篇文章可以对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662e81e8991b448e20d9