Install

    npm install --save react-handle-scroll
    or
    yarn add react-handle-scroll

Usage

import React from 'react';
import LazyLoad from 'react-lazyloadcomponent-image';
import Scroll from 'react-handle-scroll';
...
renderItem() {
    return this.state.banner.map((item, index) => <li key={ index }>
        <LazyLoad>
            <div>
                { index + 1 } <img height={200} data-src={ item } alt=""/>
            </div>
        </LazyLoad>
    </li>);
}
onReachBottom(cb) {
    // console.log('加载更多');
    this.loadData()
        .then(cb);
}
onReachTop(cb) {
    // this.loadData()
    // 	.then(cb);
    cb();
    // console.log('滑道顶部');
}
onScroll({ top, left }) {
    // console.log(top, left);
}
render() {
    return (
        <div className={ 'container' }>
            <Scroll onReachTop={ this.onReachTop } onScroll={ this.onScroll } onReachBottom={ this.onReachBottom }
                    className={ 'scroll-wrap' }
                    style={ { filter: 'brightness(90%)' } }>
                <ul>
                    { this.renderItem() }
                </ul>
            </Scroll>
        </div>
    );
}
...

| 属性 | 说明 | 是否必须 | 参数 | | ------------- | -------------------------------- | -------- | ------------------------------------------------------------------------------------------------------- | | onReachTop | 滚动到顶部时触发的函数 | 否 | callback 函数，如果传入 onReachTop 属性时，则必须在适当时机调用 callback 函数来表明操作结束可以继续滚动 | | onReachBottom | 滚动到底部时触发的函数 | 否 | 与 onReachTop 相似 | | onScroll | 滚动时触发的函数 | 否 | {top, left}滚动的距离顶部和左侧的位置 | 无 | | className | 类名；如果传入必须是 string 类型 | 否 | 无 | | id | id | 否 | 无 | | style | 样式 | 否 | 无 |