如何滚动使用输入类型单选按钮创建的列表？

Question

这是我的代码， 我希望当我向下或向上滚动时激活它们，而不是通过单击它们

<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>

谢谢你帮助我

Answer 1

我不太明白你想要实现什么。

但是，如果您想在滚动上执行任何操作，则应该监听滚动事件。 您有两个选择：

1. 您可以检查用户何时在收音机上滚动鼠标
2. 您可以随时检查用户何时滚动

第一种情况：

document.getElementById('controls').addEventListener('scroll', () => {
    //activate your element
});

第二种情况：

document.addEventListener('scroll', () => {
    //activate your element
});

编辑：按照评论中的要求。 这取决于您想如何实现这一目标。例如，您可能想通过循环检查每个无线电：

let current = 1;
let max = 4;

document.addEventListener('scroll', () => {
    //you need to uncheck the current one first
    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;

    //Finally you activate the next radio
    document.getElementById('r' + current).checked = true;
});

这是一个非常简单的实现，可以改进。