在 web 应用开发中，页面元素的滚动是经常用到的功能。通常情况下，浏览器自带的滚动条并不能满足我们的需求，因此我们需要使用一些第三方库来自定义滚动条。@amazing-hiring/react-custom-scrollbars 就是一个很好用的 npm 包，让我们来看一下如何使用它。
1. 安装
首先，我们需要安装这个包。在终端中输入以下命令：
npm install @amazing-hiring/react-custom-scrollbars
或者使用 Yarn 安装：
yarn add @amazing-hiring/react-custom-scrollbars
2. 引入组件
安装好后，我们就可以在项目中引入这个组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------------------------------------
-------- ------------- -
------ -
------------
---- --------------------
-----------
------
-------------
--
-以上代码中，我们使用了 Scrollbars 组件包裹了一个 div 元素，这个 div 就是我们要自定义的滚动条所滚动的内容，可以根据实际需要放置任意元素。
3. 控制样式
默认情况下，Scrollbars 组件会自动为我们生成滚动条样式，并且会在滚动条出现时自动显示。但是，我们也可以通过修改组件的属性来自定义样式和控制滚动条的显示和隐藏。
3.1 修改样式
要修改 Scrollbars 组件的样式，可以使用 renderTrackHorizontal 和 renderTrackVertical 属性，这两个属性接受一个函数作为参数，这个函数返回一个代表滚动条轨道的组件，这个组件可以自定义样式和事件处理。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------------------------------------
------ --------------------
-------- ------------- -
----- ------------------- - ------- -- -
------ ---- ---------- --------------------------------- ---
--
------ -
-----------
-----------------------------------------
-
---- --------------------
-----------
------
-------------
--
-以上代码中，我们通过 renderTrackVertical 函数返回了一个自定义了样式的代表垂直滚动条轨道的 div 元素，其中 props 是组件的一些属性，例如 className、style 等，必须在自定义的组件中使用。
3.2 控制显示
要控制 Scrollbars 组件的滚动条显示和隐藏，可以使用 autoHide 属性，这个属性默认值为 true，表示滚动条会在滚动时自动显示和隐藏。如果我们将 autoHide 属性设置为 false，则滚动条将一直显示。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------------------------------------
-------- ------------- -
------ -
-----------
----------------
-
---- --------------------
-----------
------
-------------
--
-3.3 控制大小
要控制 Scrollbars 组件的滚动条大小，可以使用 renderThumbHorizontal 和 renderThumbVertical 属性。这两个属性也接受一个函数作为参数，这个函数返回一个代表滚动条的组件，这个组件可以自定义大小和样式。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------------------------------------
-------- ------------- -
----- ------------------- - ------- -- -
------ ---- ---------- -------- ---------------- ----- -- ---
--
------ -
-----------
-----------------------------------------
-
---- --------------------
-----------
------
-------------
--
-以上代码中，我们通过 renderThumbVertical 函数返回了一个自定义了背景色的代表垂直滚动条的 div 元素，通过设置 style 属性来控制大小、样式等属性。
4. 示例代码
这里附上一个完整的示例代码，帮助大家更好地理解如何使用 @amazing-hiring/react-custom-scrollbars 包。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------------------------------------
------ --------------------
-------- ------------- -
----- --------------------- - ------- -- -
------ ---- ---------- ----------------------------------- ---
--
----- ------------------- - ------- -- -
------ ---- ---------- --------------------------------- ---
--
----- ------------------- - ------- -- -
------ ---- ---------- -------- ---------------- ----- -- ---
--
------ -
-----------
----------------
---------------------------------------------
-----------------------------------------
-----------------------------------------
-
---- --------------------
-----------
------
-------------
--
-以上代码中，我们通过 renderTrackHorizontal 和 renderTrackVertical 函数分别自定义了水平和垂直滚动条轨道的样式，通过 renderThumbVertical 函数自定义了垂直滚动条的大小和样式，通过设置 autoHide={false} 属性来控制滚动条的显示和隐藏。另外，我们使用了一个 CSS 文件来定义自定义滚动条的样式：
-- -------------------- ---- ------- -- --------------- -- ------------------------ - ------- ---- ----------------- -------- - ---------------------- - ------ ---- ----------------- -------- - ---------------------- - --- - ------- ----- -
这里我们分别为水平和垂直滚动条轨道设置了背景色，并分别为垂直滚动条的滚动块设置了高度。这些都是可以根据实际需求进行调整的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d4c81e8991b448db148