this is my code, I want them to be activated when I scroll down or up,not by clicking 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 >
<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
CodePudding user response:
I don't truly understand what you want to achieve.
However, if you want to do anything on scroll, you should listen to the scroll event. You have two choices:
- you can check when the user scrolls taking the mouse on the radio
- you can check when the user scrolls anytime
In first case:
document.getElementById('controls').addEventListener('scroll', () => {
//activate your element
});
In second case:
document.addEventListener('scroll', () => {
//activate your element
});
EDIT: as requested in the comment. It depends how you want to achieve this. For example you could want to check each radio by looping them:
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 that can be improved.