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;
}