Scrollbar滚动条组件的实现

import Scrollbar from ‘../common/scrollbar‘

<Scrollbar className={styles.body} scroll={this.onScroll}>
{内部内容}
</Scrollbar>

import React from "react";

export default class Scrollbar extends React.Component {
  onScroll = () => {
    const parentHeight = this.scrollbar.offsetHeight || this.scrollbar.innerHeight;
    const childrenHeight = this.view.offsetHeight;
    const scrollTop = this.scrollbar.scrollTop;
    const {scroll} = this.props;
    childrenHeight - parentHeight - scrollTop < 50 && scroll && scroll();
  };

  render() {
    const {className, children} = this.props;
    return <div className={className} ref={ref => this.scrollbar = ref} onScroll={this.onScroll.bind(this)}>
      <div ref={ref => this.view = ref}>
        {children}
      </div>
    </div>
  }
}