JavaScript单选列表滚动联动方向异常问题求助

问题场景 #

滚动页面激活单选列表时出现异常：向上滚动时激活的是下方的列表项，滚动方向与预期的激活顺序完全相反。相关代码如下：

JavaScript 代码 #

let amount = 0;
let current = 1;
let max = 4;

document.addEventListener('scroll', () => {
  amount++;
  if (amount >= 50) {
    amount = 0;
    document.getElementById('r' + current).checked = false;
    //If you reach the last radio element you reset the counter
    if (current == max)
      current = 1;
    else
      current += 1;
    document.getElementById('r' + current).checked = true;

  }
});

HTML 代码 #

<input type="radio" name="buttons" id="r1" checked>
<input type="radio" name="buttons" id="r2">
<input type="radio" name="buttons" id="r3">
<input type="radio" name="buttons" id="r4">

<div class="controls">
  <label for="r1"><span></span>LAB & Process Development</label>
  <label for="r2"><span></span>Quality & Regulatory</label>
  <label for="r3"><span></span>Engineering & Project Management</label>
  <label for="r4"><span></span>EHS</label>
</div>

问题原因 #

当前代码仅监听了滚动事件的触发次数，完全没有区分滚动方向——无论向上还是向下滚动，累计到50次触发后都会直接递增current值，导致向上滚动时激活的是下一个（视觉上更靠下的）列表项，和预期逻辑相反。

解决方案 #

通过记录滚动位置的变化判断滚动方向，再根据方向调整单选框的激活顺序：

let amount = 0;
let current = 1;
let max = 4;
// 初始化上一次的滚动位置
let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;

document.addEventListener('scroll', () => {
  // 获取当前滚动位置
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 判断滚动方向：当前位置大于上一次则为向下滚动
  const isScrollDown = scrollTop > lastScrollTop;
  // 更新上一次滚动位置，用于下次判断
  lastScrollTop = scrollTop;

  amount++;
  if (amount >= 50) {
    amount = 0;
    document.getElementById('r' + current).checked = false;
    
    if (isScrollDown) {
      // 向下滚动：切换到下一个选项，到最后一项则回到第一项
      current = current === max ? 1 : current + 1;
    } else {
      // 向上滚动：切换到上一个选项，到第一项则回到最后一项
      current = current === 1 ? max : current - 1;
    }
    
    document.getElementById('r' + current).checked = true;
  }
});

效果说明 #

修改后：

• 向下滚动时，单选框会按 r1 → r2 → r3 → r4 → r1 的顺序激活
• 向上滚动时，单选框会按 r1 → r4 → r3 → r2 → r1 的顺序激活
  完全匹配滚动方向对应的预期激活顺序。

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