Wie scrolle ich durch eine Liste, die mit Optionsfeldern für Eingabetypen erstellt wurde?

Question

Das ist mein Code, Ich möchte, dass sie aktiviert werden, wenn ich nach unten oder oben scrolle, und nicht durch Anklicken

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

Danke, dass du mir geholfen hast

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

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