我如何滚动与输入类型无线电创建的列表?

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

我不太明白你想达到什么目的。

但是，如果您想在scroll上执行任何操作，则应该侦听scroll事件。您有两个选择:

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;
});

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