一款好用的滚动条组件-SimpleBar（支持react、vue、angular ）

前提

对于一些特定的网站，滚动条要自定义样式，一般谷歌浏览器可以生效，但是当用户使用火狐时，就没有办法自定义了，因此借助插件SimpleBar。

使用

（此处只举例 react 版本）

1.安装

npm i simplebar-react 或 yarn add simplebar-react

2.引入

import SimpleBar from 'simplebar-react'
import 'simplebar/dist/simplebar.min.css'

3.组件用法

// 固定高度
const App = () => (
  <SimpleBar style={{ maxHeight: 300 }}>
    // your content
  </SimpleBar>
);

// 或者自适应父级高度
const App = () => (
  <SimpleBar style={{ height: '100%' }}>
    // your content
  </SimpleBar>
);

4.可设置的参数

autoHide

默认是true，需要hover这个区域的时候才会显示滚动条

可以设置成false，只要内容超出就一直显示滚动条

const App = () => (
  <SimpleBar style={{ height: '100%' }} autoHide={false}>
    // your content
  </SimpleBar>
);

5.样式自定义

// 我的滚动条样式
.simplebar-track {
  width: 16px !important;
  background-color: #1c1c1c !important;
  border-radius: 10px;
}
.simplebar-scrollbar {
  transition: height 1s;
  width: 12px !important;
  margin: 0 2px;
  background-color: #2a2a2a !important;
  border-radius: 10px;
  box-shadow: inset 0 10px 5px -10px #fff;
  &:before{
    display: none;
  }
}

6.效果图

链接

simplebar: github.com/Grsmto/simp…

react: github.com/Grsmto/simp…

vue: github.com/Grsmto/simp…

angular: github.com/Grsmto/simp…