react-handle-scroll

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

Usage no npm install needed!

<script type="module">
  import reactHandleScroll from 'https://cdn.skypack.dev/react-handle-scroll';
</script>

README

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 样式