I am trying to achieve the effect where I can scroll jump from one to another div ID. Basically I scroll down on div-1 and triggers an event on the scroll and jumps to div-2 and vice versa. I was able to achieve it in vanilla JS. It's flickering on Chrome, but working smoothly on other browsers (except grandpa IE). Anyone knows what might be causing it, and what solution or alternate I can get?
document.getElementById("scroll-div1").addEventListener("wheel", myFunction1);
function myFunction1() {
document.getElementById("scroll-div1").addEventListener('wheel', function(e) {
if (e.deltaY > 0) {
document.getElementById("scroll-div2").scrollIntoView();
}
else if (e.deltaY < 0) {
window.scrollTo(0,0);
}
});
}
document.getElementById("scroll-div2").addEventListener("wheel", myFunction2);
function myFunction2() {
document.getElementById("scroll-div2").addEventListener('wheel', function(e) {
if (e.deltaY > 0) {
document.getElementById("scroll-div3").scrollIntoView();
}
else if (e.deltaY < 0) {
window.scrollTo(0,0);
}
});
}
document.getElementById("scroll-div3").addEventListener("wheel", myFunction3);
function myFunction3() {
document.getElementById("scroll-div3").addEventListener('wheel', function(e) {
if (e.deltaY < 0) {
document.getElementById("scroll-div2").scrollIntoView();
}
});
} <div id="scroll-div1" style="height: 768px; overflow: auto;">
<p>This is div 1</p>
</div>
<div id="scroll-div2" style="height: 768px">
<p>This is div 2</p>
</div>
<div id="scroll-div3" style="height: 768px">
<p>This is div 3</p>
</div>