随着 Web 应用的大量开发，滚动条成为一个我们需要关注的细节问题。在复杂组件中，自定义滚动条可以提供更好的用户体验，而 eo-react-custom-scrollbars 正是一个帮助我们实现自定义滚动条的 npm 包。
安装 eo-react-custom-scrollbars
如果你已经有 React 项目，可以使用 npm 或者 yarn 安装 eo-react-custom-scrollbars：
npm install eo-react-custom-scrollbars --save
或
yarn add eo-react-custom-scrollbars
使用 eo-react-custom-scrollbars
import React from 'react'
import { Scrollbars } from 'eo-react-custom-scrollbars'
const MyComponent = () => (
<Scrollbars style={{ width: 400, height: 400 }}>
<p>Scroll me if you can...</p>
</Scrollbars>
)Scrollbars 组件接受一些属性，以配置它的行为和外观。下面详细讲述了这些属性的含义。
autoHide
默认情况下，eo-react-custom-scrollbars 会在用户没有与滚动条互动时自动隐藏它。你可以通过将这个属性设置为 false 来禁用这个功能：
<Scrollbars autoHide={false} />renderThumbHorizontal 和 renderThumbVertical
Scrollbars 组件会根据滚动唯一标识符生成滚动条。你可以使用 renderThumbHorizontal 和 renderThumbVertical 属性来自定义滚动条的外观：
<Scrollbars
renderThumbHorizontal={props => <div {...props} className="my-horizontal-thumb"/>}
renderThumbVertical={props => <div {...props} className="my-vertical-thumb"/>}
/>其中 props 包含一组能够传递到 DOM 元素中的属性，尤其是 style 和 className。
renderTrackHorizontal 和 renderTrackVertical
你还可以定义滚动跟踪器的视觉效果，通过定义 renderTrackHorizontal 和 renderTrackVertical 两个属性：
<Scrollbars
renderTrackHorizontal={props => <div {...props} className="my-horizontal-track"/>}
renderTrackVertical={props => <div {...props} className="my-vertical-track"/>}
/>与 renderThumbHorizontal 和 renderThumbVertical 相似，props 也包含跟踪器上可用的所有属性和样式。
renderView
你可以定义滚动内容视图的外观，通过 renderView 属性：
<Scrollbars
renderView={props => <div {...props} className="my-view"/>}
/>onUpdate
当用户滚动窗口时，Scrollbars 组件将触发 onUpdate 事件。你可以用这个属性来观察滚动位置：
<Scrollbars
onUpdate={({ top, left }) => console.log(`Top: ${top}, Left: ${left}`)}
/>上述代码在开发者工具控制台中打印最新的滚动位置。
完整示例
我们来看一个完整的使用 eo-react-custom-scrollbars 的例子。它包含了实现自定义视觉效果的样式。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ---------- - ---- ----------------------------
------ --------------
----- --- - -- -- -
-----------
----------
-------------------
---------------------------- -- ---- ---------- -------------------------------
-------------------------- -- ---- ---------- -----------------------------
---------------------------- -- ---- ---------- -------------------------------
-------------------------- -- ---- ---------- -----------------------------
----------------- -- ---- ---------- -------------------
------------ ---- ---- -- -- ----------------- ------- ----- ----------
-
------------------------ -- -- -
---- ------- -------- ------- -- -------- ----- -----------
---
-------------
-
------ ------- ---样式：
-- -------------------- ---- ------- -- ---- ------ ------ ---- -- ------------------- - -------- ----- - -- ----- ------ -- ------------------ --------------- - --------- --------- ------ ---- ------- ---- -------- ---- ----------------- ----- - ----------------- - ------- ----- ----- ---- ------ --------- - ----- - --------------- - ------ ----- ---- ---- ------- --------- - ----- - -- ----- ------ -- ------------------ --------------- - --------- --------- -------- ---- ----------------- ----- -------------- ---- - ----------------- - ------- ----- ---- ---- -------- ---- - --------------- - ------ ----- ----- ---- -------- ---- - -- ----- ------ -- ----- -- ------- ------------------ ------- --------------- - -------- -- - -- ---- ------ -- ----- - ------- ----- ------ ----- -
这是一个很简单的例子，但基本原理也可以应用于更复杂的组件，例如弹出菜单或带有动画的列表。
结论
eo-react-custom-scrollbars 是一个帮助我们实现自定义滚动条视觉效果的 npm 包。在实际项目中可以使用它来提高用户体验和整体视觉效果。通过短短几个属性和样式代码，你可以快速创建一个滚动条，满足你的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e0fb81d47349e53cf0