Scrollbar滚动条组件的实现

div滚动条可以做多个区块的多内容展示

使用方式：

import Scrollbar from '../common/scrollbar'

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

引入直接使用，内部是要展示的长内容

styles.body设置区块占用宽高，scroll是滚动到底部时才进行触发，一般用于做滚动加载下一页数据关于滚动加载，可在之后文章加入。

先看实现：

div的onScroll滚动事件，当滚动到距离底部50px以内时触发外部传入的scroll里面的事件。

Scrollbar内部的dom节点会显示在children中。

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