说说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'>
        <Scrollbars
            className='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'>
        <Scrollbars
            className='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'>
        <Scrollbars
            className='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

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

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

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

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

---

autoHideTimeout

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

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

<Scrollbars
    className='main'
    autoHide
    autoHideTimeout={1000} // 单位ms
>

---

over~