JQuery 滑动元素触底通用方法

/**
 * 页面触底执行函数
 * @param {Element} selector 滑动元素
 * @param {function} callback 执行函数
 */
function scrollToBottom({ selector = window, callback = () => {} }) {
  let timer = null;
  let scrollTopOld = 0;

  const scrollPage = function () {
    const $el = selector == window ? $(selector.document) : $(selector).children(); // 你想检查的元素的ID
    const scrollTop = $(selector).scrollTop(); // 当前滚动位置
    const viewportHeight = $(selector).height(); // 视口高度
    const elHeight = $el.height(); // 元素本身的高度
    if (viewportHeight + scrollTop >= elHeight) {
      if (scrollTopOld != 0 && scrollTopOld < scrollTop) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          console.log('scrollPage', scrollTopOld, scrollTop);
          callback(this);
        }, 100);
      }
    }
    scrollTopOld = scrollTop;
  };
  $(selector).on('scroll', scrollPage);
}

使用示例：

<main class="page-main" style="height:80vh;overflow-y: scroll;">
	<div class="container" style="height:200vh;"></div>
</main>

// 分页
scrollToBottom({
  selector: '.page-main',
  callback() {
    console.log('=============分页=======================');
  },
});