scrollIntoView() bugging on Chrome

Question

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>

score 2 · Answer 1 · answered Sep 03 '18 at 15:28

2

So I tried to also use jQuery with various methods and seems like the issue is with browsers supporting scrolling synchronously/asynchronously. In this case, Chrome seems to have the asynchronous scrolling, which lags the scrolling callbacks. So for now, in September 2018, I am unable to give the certain effect I was looking for and wait for some improvements in future.

Reference : https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

answered Sep 03 '18 at 15:28

Tayeaba Mila

176
2
11

as of now, have you encountered any solution or possible approaches to the problem? – ogostos Apr 01 '19 at 11:09
Haven't unfortunately. If you get some thing, let us know! – Tayeaba Mila Apr 08 '19 at 17:24
Hey @TayeabaMila , great explanation! I am facing the same thing and I wonder if you have discovered anything by now. Cheers =) And what about you @agostos? – Arp Jul 12 '22 at 13:41

scrollIntoView() bugging on Chrome

1 Answers1