水平网页分区块平滑滚动的jQuery实现问题求解

原有代码失效核心原因 #

• 第一种监听scroll事件的方案：scrollIntoView的平滑动画过程会持续触发scroll回调，判断逻辑会在动画中途反复执行，导致页面来回跳转无法停到目标位置；另外调用visible(true)是要求元素100%处于视口内，平滑滚动过程中相邻两个section会同时部分出现在视口，判断条件直接失效。
• 第二种监听wheel事件的方案：首先最后一个返回上一区块的判断写错了方向规则（写的e.deltaY > 0，实际向左返回应该判断e.deltaY < 0）；其次没有加滚动锁定，滚轮单次滑动会连续触发十几次wheel事件，会直接连跳多个区块；最后没有拦截原生默认滚动行为，原生滚动和手动触发的平滑滚动会互相冲突。
• 额外缺失项：原有代码没有配套对应CSS，水平滚动的基础布局如果没写对，所有JS逻辑都不会生效。

正确实现步骤 #

1. 先写对基础布局CSS #

这部分是功能生效的前提，必须保证每个section占满整屏宽度，容器横向排布：

/* 重置默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#main {
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  /* 隐藏横向滚动条，不需要可删除 */
  scrollbar-width: none;
}
#main::-webkit-scrollbar {
  display: none;
}
.wrapper {
  display: flex;
  height: 100%;
  width: fit-content;
}
.section {
  width: 100vw;
  height: 100vh;
}
/* 测试用不同背景，开发时可替换 */
#firstSection { background: #f0f9ff; }
#secondSection { background: #e0f2fe; }
#thirdSection { background: #bae6fd; }

2. JS逻辑实现 #

不需要额外依赖元素可见性检测库，直接用索引记录当前位置，加滚动锁避免重复触发即可：

// 基础配置
const sections = $('.section');
const sectionCount = sections.length;
let currentIndex = 0;
// 滚动锁：动画执行中禁止触发新的滚动
let isScrolling = false;
const scrollDuration = 800; // 平滑动画时长，可根据需求调整

$('#main').on('wheel', function(e) {
  // 动画执行中直接拦截事件
  if (isScrolling) {
    e.preventDefault();
    return;
  }

  // 判断滚动方向：deltaY>0对应向右滚到下一区，<0对应向左滚回上一区
  const isScrollNext = e.deltaY > 0;
  let targetIndex = currentIndex;

  if (isScrollNext) {
    // 滚动到最后一区时停止
    targetIndex = Math.min(currentIndex + 1, sectionCount - 1);
  } else {
    // 滚动到第一区时停止
    targetIndex = Math.max(currentIndex - 1, 0);
  }

  // 目标页和当前页一致时不执行滚动
  if (targetIndex === currentIndex) return;

  e.preventDefault();
  isScrolling = true;

  // 触发平滑滚动到目标区块
  sections.eq(targetIndex)[0].scrollIntoView({
    behavior: 'smooth',
    block: 'start',
    inline: 'start'
  });

  // 更新当前索引，动画结束后解锁
  currentIndex = targetIndex;
  setTimeout(() => {
    isScrolling = false;
  }, scrollDuration);
});

可选优化点 #

• 如果需要兼容触控板横向滑动、手机端左右滑的场景，可以新增对touchstart/touchend事件的监听，计算滑动距离判断方向，逻辑和wheel事件完全一致。
• 如果要支持键盘左右方向键切换，监听keydown事件判断按键编码触发对应滚动即可。

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