说说react-custom-scrollbars插件在react hooks版本中的使用

react-custom-scrollbars插件

读前说明
基本使用
属性介绍
- onScroll
- renderView
- renderThumbVertical
- autoHide
- autoHideTimeout

读前说明

github地址：https://github.com/malte-wessel/react-custom-scrollbars

作用：

快速实现被包裹区域的滚动效果

关于本篇：

在官网以及其他文章中，都是介绍该插件在react class版本中的使用，

未涉及到react hooks版本中的使用方法。

所以本篇就介绍一下该插件在react hooks版本中的实现。

基本使用

安装插件：

npm install react-custom-scrollbars --save

在需要使用的文件中，引入插件：

import { Scrollbars } from 'react-custom-scrollbars';

需要让哪个元素实现滚动效果，就用<Scrollbars ></Scrollbars >包裹住该元素即可。

写个demo：

import React from 'react'
import './scrollPlugin.css' // demo样式
import { Scrollbars } from 'react-custom-scrollbars'; // 引入插件组件// react hooks版本的组件
const ScrollPlugin = () => {return <div className='show-wrap'><ScrollbarsclassName='main' // 设置类名 方便在样式文件中写css代码><ul className='show-ul'> // 要滚动的区域{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, index) => {return <li key={index}>{item}</li>})}</ul></Scrollbars></div>
}export default ScrollPlugin

实现的效果：

顺便贴一下demo中的css代码：

/* scrollPlugin.css */
.show-wrap {width: 300px;height: 400px;margin-left: 20px;margin-top: 20px;
}.main {width: 100%;height: 100%;overflow: hidden;background-color: pink;border-radius: 12px;
}.show-ul {list-style-type: none;width: 100%;margin: 0;padding: 0;
}.show-ul li {width: 100%;height: 60px;margin-top: 10px;background-color: cyan;border-radius: 12px;line-height: 60px;
}

属性介绍

官方md中给出了一堆属性，

但是没有注释说明。有些陌生词汇，导致使用上可能不容易入手。

在这里从上到下，介绍一下常用的几个属性。

上面那些this.后面的变量，都是函数，用的时候要写成函数的形式。

在react hooks版本中，没有this.

onScroll

滚动条滚动的时候，触发handleScroll函数

demo：

import React from 'react'
import './scrollPlugin.css'
import { Scrollbars } from 'react-custom-scrollbars';const ScrollPlugin = () => {const handleScroll = () => { // 这里写滚动函数console.log('滚动条动了')}return <div className='show-wrap'><ScrollbarsclassName='main'onScroll={handleScroll} // 这里写入属性><ul className='show-ul'>{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, index) => {return <li key={index}>{item}</li>})}</ul></Scrollbars></div>
}export default ScrollPlugin

滚动一下，可以看到控制台有输出内容：

renderView

这个函数是用来改变组件样式的。

样式可以在css文件写，这里就不多介绍了。

renderThumbVertical

改变滚动条样式。

写个demo：

import React from 'react'
import './scrollPlugin.css'
import { Scrollbars } from 'react-custom-scrollbars';const ScrollPlugin = () => {const renderThumb = () => { // renderThumb改变样式时被调用的函数，必须是函数const thumbStyle = { // 设置滚动条样式backgroundColor: 'rgb(9,164,215)',borderRadius: '4px'}return <div style={{...thumbStyle}} />}return <div className='show-wrap'><ScrollbarsclassName='main'renderThumbVertical={renderThumb} // 把新的滚动条样式写入组件><ul className='show-ul'>{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, index) => {return <li key={index}>{item}</li>})}</ul></Scrollbars></div>
}export default ScrollPlugin

效果图：

autoHide

鼠标离开滚动区域后，滚动条会自动隐藏。

鼠标进入滚动区域后，滚动条会自动显示。

在插件组件中直接写入该属性即可使用：

<ScrollbarsclassName='main'autoHide // 自动隐藏属性>// 滚动内容
</Scrollbars>

autoHideTimeout

鼠标离开滚动区域多少ms后，滚动条才会自动消失。

该属性必须搭配autoHide属性，不然无效。

<ScrollbarsclassName='main'autoHideautoHideTimeout={1000} // 单位ms
>

over~