vtils/_cjs/react/useReachBottom.js

一个面向业务的 JavaScript/TypeScript 实用程序库。

"use strict";

exports.__esModule = true;
exports.useReachBottom = useReachBottom;
var _utils = require("../utils");
var _react = require("react");
var _reactUse = require("react-use");
/**
 * Modified from https://github.com/karl-run/react-bottom-scroll-listener/blob/master/src/hook/index.tsx
 */

/**
 * 立即触发一次回调，并且每当到达页面底部时触发回调。
 *
 * @public
 * @param callback 回调
 * @param offset 触底偏移量
 * @returns 返回
 */
function useReachBottom(callback, offset) {
  if (offset === void 0) {
    offset = 0;
  }
  var containerRef = (0, _react.useRef)(null);
  var latestCallback = (0, _reactUse.useLatest)(callback);
  (0, _react.useEffect)(function () {
    var latestDebouncedCallback = (0, _utils.debounce)(function () {
      return latestCallback.current();
    }, 200, {
      leading: true,
      trailing: true
    });
    var unbindEvent = (0, _utils.bindEvent)(containerRef.current || window)('scroll', function () {
      if (this === window) {
        var scrollNode = document.scrollingElement || document.documentElement;
        var scrollContainerBottomPosition = Math.round(scrollNode.scrollTop + window.innerHeight);
        var scrollPosition = Math.round(scrollNode.scrollHeight - offset);
        if (scrollPosition <= scrollContainerBottomPosition) {
          latestDebouncedCallback();
        }
      } else {
        var _scrollNode = containerRef.current;
        var _scrollContainerBottomPosition = Math.round(_scrollNode.scrollTop + _scrollNode.clientHeight);
        var _scrollPosition = Math.round(_scrollNode.scrollHeight - offset);
        if (_scrollPosition <= _scrollContainerBottomPosition) {
          latestDebouncedCallback();
        }
      }
    });

    // 立即触发一次回调
    latestDebouncedCallback();
    return function () {
      unbindEvent();
      latestDebouncedCallback.cancel();
    };
  }, [offset]);
  return containerRef;
}