rc-hooks/es/useLoadMore/useScrollToLower.js

React Hooks Library.

import { useEffect, useCallback } from 'react';
import usePersistFn from '../usePersistFn';
import { getScrollHeight, getClientHeight, getScrollTop } from '../utils/dom';
function getTarget(target) {
    if (typeof target === 'function') {
        // @ts-ignore
        return target();
    }
    return target;
}
var useScrollToLower = function (_a) {
    var _b = _a === void 0 ? {} : _a, outTarget = _b.target, _c = _b.threshold, threshold = _c === void 0 ? 100 : _c, _d = _b.onScrollLower, onScrollLower = _d === void 0 ? function () { } : _d;
    var onScrollLowerPersist = usePersistFn(onScrollLower);
    var scrollMethod = useCallback(function () {
        if (!outTarget) {
            return;
        }
        var target = getTarget(outTarget);
        if (!target) {
            return;
        }
        if (getScrollHeight(target) - getScrollTop(target) <= getClientHeight(target) + threshold) {
            onScrollLowerPersist();
        }
    }, [onScrollLowerPersist, outTarget, threshold]);
    useEffect(function () {
        if (outTarget) {
            var target_1 = getTarget(outTarget);
            if (target_1) {
                target_1.addEventListener('scroll', scrollMethod);
                return function () {
                    target_1.removeEventListener('scroll', scrollMethod);
                };
            }
        }
    }, [outTarget, scrollMethod]);
};
export default useScrollToLower;