HTML实现逐段滑动滚动效果 现有JS代码无响应求修复方案

原有代码问题排查 #

• 变量修改逻辑错误：IDK + 1、IDK - 1仅做了运算未赋值回IDK，变量值实际不会变更
• 判断逻辑错误：边界判断if(IDK=1)是赋值操作，不是等值判断，且滚动方向和段落切换的对应逻辑写反
• 缺少滚动锁：连续触发滚轮事件会导致动画重叠，出现滚动混乱
• 事件绑定对象未定义：代码中slide元素未声明，且滚轮事件绑定在全局window上适配性更好
• 缺少边界限制：未限制IDK的取值范围，超出段落总数或小于1时会找不到对应DOM节点报错
• 未阻止默认滚动行为：原生滚动和自定义动画同时触发会导致效果混乱

完整实现方案 #

前置结构要求 #

给每个需要滑动切换的段落添加统一类名section，无需手动设置ID，JS会自动识别总段落数：

<div class="section">第一段内容</div>
<div class="section">第二段内容</div>
<div class="section">第三段内容</div>

可以添加基础CSS让每个段落占满视口，效果更直观：

* {
  margin: 0;
  padding: 0;
}
.section {
  width: 100vw;
  height: 100vh;
}

JS实现代码 #

沿用原代码依赖的jQuery语法编写：

// 适配不同浏览器的滚轮事件
const mousewheelEvent = /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll" : "mousewheel";
// 当前激活的段落索引，从0开始适配数组操作
let currentIndex = 0;
// 滚动锁，动画执行期间禁止触发新的滚动
let isScrolling = false;
// 获取所有段落节点
const sections = $(".section");
// 总段落数
const totalSections = sections.length;

// 绑定滚轮事件
$(window).on(mousewheelEvent, function(e) {
  // 动画执行中直接返回，避免重复触发
  if (isScrolling) return;
  isScrolling = true;

  // 判断滚动方向：true为向上滚，false为向下滚
  const isScrollUp = e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta > 0 : e.originalEvent.detail < 0;

  if (isScrollUp) {
    // 向上滚索引减1，最小为0
    currentIndex = Math.max(0, currentIndex - 1);
  } else {
    // 向下滚索引加1，最大不超过总段落数-1
    currentIndex = Math.min(totalSections - 1, currentIndex + 1);
  }

  // 执行平滑滚动动画
  $("html,body").animate(
    { scrollTop: sections.eq(currentIndex).offset().top },
    1000,
    function() {
      // 动画结束后解锁
      isScrolling = false;
    }
  );
  // 阻止原生滚动默认行为
  e.preventDefault();
});

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