前两天有分享一个自己开发的react.js自定义滚动条RScroll。今天再分享一款不错的React滚动条组件MagicScroll.js。

react模拟滚动条组件RScroll

magicscroll.js 一个react.js自定义滚动条组件。完美支持兼容TypeSciprt、 SSR、 PC、移动端、触屏。

特性

• 支持自定义滚动条，滚动轨道，滚动容器等。有丰富的API和事件；
• 只需<magic-scroll>包裹内容即可出现自定义滚动条；
• 支持TypeSciprt、 SSR、 PC、移动端、触屏友好；
• 支持检测内容尺寸发生变化；

快速开始

安装

# 通过yarn或者npm安装

yarn add magic-scroll
# 或者
npm i magic-scroll -S

使用

// 引入magic-scroll组件
import Scrollbar from 'magic-scroll';
import React from 'react';

class BasicDemo extends React.Component {
  render() {
    return (
      <div className="parent">
        <Scrollbar keepBarShow>
          <div className="child" />
        </Scrollbar>
      </div>
    );
  }
}

end，附上项目文档及地址。感兴趣的同学可以去看下哈~~

# 文档地址
https://magicscrolljs.yvescoding.org/

# 仓库地址
https://github.com/YvesCoding/magic-scroll

ok，今天就分享到这里。希望大家能喜欢。