How to scroll a list created with input type radio buttons?

Question

This is my code, I want them to be activated when I scroll down or up, not by clicking on them

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

thank you for helping me

Answer 1

I don't quite understand what you want to achieve.

However, if you want to do anything on scroll, you should listen to scroll events. You have two options:

1. You can check when the user scrolls the mouse on the radio
2. You can always check when the user scrolls

The first situation:

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

Second case:

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

Edit: As requested in the comments. It depends on how you want to achieve this. For example, you might want to check each radio by looping:

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

This is a very simple implementation and can be improved.