如何用jQuery检测移动端区块触底后的继续滚动并切换下一节

嘿，我刚好做过类似的需求，来给你一步步拆解怎么实现！你已经能检测区块触底了，现在核心就是要捕捉用户在触底后仍尝试向下滚动的意图，下面是具体的实现思路和代码：

核心思路 #

移动端的滚动主要靠触摸操作，所以我们可以通过监听touchstart和touchmove事件来判断：

1. 先记录用户触摸的起始位置
2. 在触摸移动时，同时判断两个条件：
   • 当前区块是否已经滚动到底部（你已经掌握的逻辑）
   • 用户是否在尝试向下滚动页面（通过触摸坐标的变化判断）
3. 满足条件时，阻止系统默认的弹跳效果，平滑滚动到下一个区块

完整代码实现 #

$(document).ready(function() {
  // 获取所有区块元素
  const $sections = $('.section');
  // 当前活跃的区块索引
  let currentSectionIndex = 0;
  // 记录触摸起始的Y坐标
  let startY = 0;
  // 动画锁：避免滚动过程中重复触发切换
  let isAnimating = false;

  // 封装判断区块是否触底的函数（你已经会的逻辑，这里整理成复用函数）
  function isSectionAtBottom($section) {
    const windowHeight = $(window).height();
    const scrollTop = $(window).scrollTop();
    const sectionTop = $section.offset().top;
    const sectionHeight = $section.outerHeight();
    // 考虑一点误差，避免因像素精度问题判断不准
    return scrollTop + windowHeight >= sectionTop + sectionHeight - 10;
  }

  // 监听触摸开始事件，记录起始坐标
  $(document).on('touchstart', function(e) {
    if (isAnimating) return; // 动画中不响应新的触摸
    startY = e.originalEvent.touches[0].pageY;
  });

  // 监听触摸移动事件，判断滚动意图
  $(document).on('touchmove', function(e) {
    if (isAnimating) return;

    const $currentSection = $sections.eq(currentSectionIndex);
    const isAtBottom = isSectionAtBottom($currentSection);
    const moveY = e.originalEvent.touches[0].pageY;
    // 手指向上滑动（pageY减小）= 用户想要让页面向下滚动
    const isScrollingDown = moveY < startY;

    // 满足触底+向下滚动意图的条件
    if (isAtBottom && isScrollingDown) {
      // 不是最后一个区块才执行切换
      if (currentSectionIndex < $sections.length - 1) {
        e.preventDefault(); // 阻止系统默认的弹跳效果
        isAnimating = true;
        currentSectionIndex++;
        // 获取下一个区块的顶部位置，平滑滚动
        const nextSectionTop = $sections.eq(currentSectionIndex).offset().top;
        $('html, body').animate({
          scrollTop: nextSectionTop
        }, 500, function() {
          // 动画完成后解锁
          isAnimating = false;
        });
      }
    }
  });
});

关键细节说明 #

• 触摸事件的优势：相比scroll事件，touchstart和touchmove能更早捕捉用户的滚动意图，在系统触发弹跳前就阻止默认行为，体验更流畅。
• 动画锁isAnimating：防止用户在区块切换的动画过程中重复滚动，避免出现多个切换请求导致的混乱。
• 滚动方向判断：移动端屏幕的pageY坐标是从顶部开始递增的，所以手指向上滑动时，moveY会小于startY，这代表用户想要向下滚动页面查看更多内容。
• 误差处理：在触底判断里加了-10的误差值，避免因浏览器或设备的像素精度问题，导致触底判断不灵敏。

可选扩展 #

如果需要支持向上滚动切换回上一个区块，逻辑完全类似：只需要判断当前区块是否滚动到顶部，且用户尝试向上滚动（moveY > startY），然后切换到上一个区块即可。

内容的提问来源于stack exchange，提问作者Rodrigo Nava Ramirez