使用jquery.nicescroll：如何检测页面/ div已到顶/底后的鼠标滚动动作

这个场景我之前做无限滚动的时候碰到过，确实原生scroll事件的触发逻辑很“实在”——只有元素真的发生滚动位移才会触发，这就导致已经滚到底部后，用户再滚鼠标完全没反应。要实现你要的效果，核心思路是绕过scroll事件，直接监听鼠标的滚轮动作，再结合状态判断和定时器来控制触发时机。

具体实现步骤 #

1. 监听滚轮动作：用mousewheel（Chrome、Edge、IE）和DOMMouseScroll（Firefox）事件来捕获所有鼠标滚轮的操作，不管元素能不能滚动。
2. 判断是否处于底部：通过元素的scrollTop、clientHeight和scrollHeight计算，或者直接用NiceScroll提供的API来获取滚动状态。
3. 定时器控制触发时机：记录“到达底部”的状态，启动定时器，只有当定时器结束后用户再次滚动时，才触发目标函数，避免误触。

完整代码示例 #

假设你的滚动容器是.scroll-container，先初始化NiceScroll，再添加滚轮监听逻辑：

// 初始化NiceScroll
const $scrollContainer = $('.scroll-container');
$scrollContainer.niceScroll({
  cursorcolor: '#ccc',
  cursorwidth: '8px',
  // 你的其他配置项
});

// 状态变量
let isAtBottom = false;
let canTriggerFunction = false;
let scrollTimer = null;

// 监听滚轮事件（兼容全浏览器）
$scrollContainer.on('mousewheel DOMMouseScroll', function(e) {
  // 判断当前是否滚动到底部（考虑1px的精度误差）
  const container = this;
  const isCurrentBottom = (container.scrollTop + container.clientHeight) >= (container.scrollHeight - 1);

  if (!isCurrentBottom) {
    // 不在底部，重置所有状态
    isAtBottom = false;
    canTriggerFunction = false;
    clearTimeout(scrollTimer);
    return;
  }

  // 现在处于底部区域
  if (!isAtBottom) {
    // 刚滚动到底部，启动定时器（这里设为3秒，可根据需求调整）
    isAtBottom = true;
    canTriggerFunction = false;
    scrollTimer = setTimeout(() => {
      canTriggerFunction = true;
    }, 3000);
  } else {
    // 已经在底部，检查是否满足触发条件
    if (canTriggerFunction) {
      // 执行你的目标函数
      handleBottomScrollTrigger();
      // 可选：触发后重置状态，避免连续触发
      canTriggerFunction = false;
      // 也可以重新启动定时器，让用户再次等待后才能触发
      scrollTimer = setTimeout(() => {
        canTriggerFunction = true;
      }, 3000);
    }
  }
});

// 你的目标函数
function handleBottomScrollTrigger() {
  console.log('用户在底部停留后再次滚动，触发操作！');
  // 这里写你的业务逻辑，比如跳转到其他区域、加载更多等
}

关键点说明 #

• 兼容性处理：同时监听mousewheel和DOMMouseScroll是为了覆盖所有主流浏览器，Firefox早期版本只支持DOMMouseScroll。
• 精度问题：判断底部时减1是因为有些浏览器的scrollTop计算会有小数像素的误差，避免出现“明明到底了却没检测到”的情况。
• 状态控制：用isAtBottom和canTriggerFunction两个变量来区分“刚到达底部”和“已经停留足够时间”的状态，确保只有用户主动再次滚动才触发。

内容的提问来源于stack exchange，提问作者allumette