react 中封装一个简单的滚动条组件

import React, { Component } from 'react'
//引入better-scroll
import BScroll from 'better-scroll'
import './style.scss'
export default class AppScroll extends Component {
    //利用ref精准的获取dom元素
    wrapper = React.createRef();
    render() {
        return (
            <div className="scroll-wrapper" ref={this.wrapper}>
              <div className="scroll-content">
                  {this.props.children}
              </div>  
            </div>
        )
    }

    componentDidMount(){
        let scroll = new BScroll(this.wrapper.current)
           // 在用户需要滚动前及时更新滚动视图
        scroll.on('beforeScrollStart', ()=>{
            scroll.refresh();
        })
    }
}

 

css

 

.scroll-wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

 

转载于:https://www.cnblogs.com/r-mp/p/11252533.html