npm 包 eo-react-custom-scrollbars 使用教程

随着 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 的例子。它包含了实现自定义视觉效果的样式。

import React from 'react'
import { Scrollbars } from 'eo-react-custom-scrollbars'
import './styles.css'

const App = () => (
  <Scrollbars
    autoHeight
    autoHeightMax={500}
    renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
    renderThumbVertical={props => <div {...props} className="thumb-vertical"/>}
    renderTrackHorizontal={props => <div {...props} className="track-horizontal"/>}
    renderTrackVertical={props => <div {...props} className="track-vertical"/>}
    renderView={props => <div {...props} className="view"/>}
    onUpdate={({ top, left }) => console.log(`Top: ${top}, Left: ${left}`)}
  >
    {[...Array(100)].map((_, i) => (
      <div key={i} style={{ height: 50 }}>Hello World {i+1}</div>
    ))}
  </Scrollbars>
)

export default App

样式：

/* Hide native scroll bars */
::-webkit-scrollbar {
  display: none;
}

/* Track styles */
.track-horizontal,
.track-vertical {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 100;
  background-color: #eee;
}

.track-horizontal {
  height: 10px;
  left: 2px;
  width: calc(100% - 4px);
}

.track-vertical {
  width: 10px;
  top: 2px;
  height: calc(100% - 4px);
}

/* Thumb styles */
.thumb-horizontal,
.thumb-vertical {
  position: absolute;
  z-index: 200;
  background-color: #444;
  border-radius: 5px;
}

.thumb-horizontal {
  height: 10px;
  top: 1px;
  opacity: 0.5;
}

.thumb-vertical {
  width: 10px;
  left: 1px;
  opacity: 0.5;
}

/* Hover effect on thumb */
&:hover .thumb-horizontal,
&:hover .thumb-vertical {
  opacity: 1;
}

/* View styles */
.view {
  height: 100%;
  width: 100%;
}

这是一个很简单的例子，但基本原理也可以应用于更复杂的组件，例如弹出菜单或带有动画的列表。

结论

eo-react-custom-scrollbars 是一个帮助我们实现自定义滚动条视觉效果的 npm 包。在实际项目中可以使用它来提高用户体验和整体视觉效果。通过短短几个属性和样式代码，你可以快速创建一个滚动条，满足你的需求。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e0fb81d47349e53cf0