fk-react-ui-components/components/InfiniteScroll/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

import styled from  "styled-components";
import React from "react";
import _ from 'lodash'
const ScrollBox = styled.div`
    height: ${(props) => props.height || "520px"};
    overflow: auto;
    &::-webkit-scrollbar {
        display: none;
    }
`;

var listenScrollEvent = _.throttle(function(event) {
    var target = event && event.currentTarget;
    var props = this, delta;
    const scrollTop = target && target.scrollTop + target.clientHeight,
        containerHeight = target && target.scrollHeight,
        scrollPercentage = scrollTop > 0 && containerHeight > 0 && (scrollTop / containerHeight);
    if (event.wheelDelta){
        delta = event.wheelDelta;
    }else{
        delta = -1 * event.deltaY;
    }
    if (scrollPercentage > 0.8 && delta < 0) {
        props.onScrollCallback();
    }
}, 200);

export default class Paginator extends React.Component {
    render(){
        return <ScrollBox height={this.props.height} onWheel={listenScrollEvent.bind(this.props)}>
        {this.props.children}
        </ScrollBox>
    }
}