Comment faire défiler une liste créée avec des boutons radio de type saisie ?

Question

Voici mon code, Je veux qu'ils soient activés lorsque je fais défiler vers le bas ou vers le haut, pas en cliquant dessus

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

Merci de m'avoir aidé

Answer 1

Je ne comprends pas très bien ce que vous voulez réaliser.

Mais si vous voulez faire quelque chose sur le défilement, vous devriez écouter les événements de défilement. Vous avez deux options :

1. Vous pouvez vérifier quand l'utilisateur fait défiler la souris sur la radio
2. Vous pouvez toujours vérifier quand l'utilisateur a fait défiler

La première situation :

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

La deuxième situation :

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

Edit : Comme demandé dans les commentaires. Cela dépend de la manière dont vous souhaitez y parvenir. Par exemple, vous souhaiterez peut-être vérifier chaque radio en boucle : 

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

Il s'agit d'une mise en œuvre très simple et peut être améliorée.