react-custom-scrollbars插件
读前说明
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~