Permanent jitter in browser scroll #309

Activity

1. speplinski commented on Mar 25, 2023

   

   speplinski

   on Mar 25, 2023

   More actions

   It seems that the problem might be related to the improper clearing of the interval, and this issue appears, for example, in the Chrome browser. It would be beneficial to add extra conditions to check if the scrolling has reached its target or surpassed the boundaries. Here is the improved version of the code:

   if (currScrollY === targetScrollY || (sign === 1 && currScrollY >= targetScrollY) || (sign === -1 && currScrollY <= targetScrollY)) {
       clearInterval(interval);
   }
   
2. speplinski commented on Mar 25, 2023

   

   speplinski

   on Mar 25, 2023

   More actions

   Alternatively, you can also simplify the code using the smoothscroll-polyfill along with the scrollIntoView() function to achieve a smoother scrolling experience.

   Include the script in the <head> section of your HTML file:

   <script src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>
   

   Then activate the polyfill and change the scrollToElement function:

   smoothscroll.polyfill();
   
   function scrollToElement(element) {
       element.scrollIntoView({
           behavior: 'smooth',
           block: 'start'
       });
   }
   

   This version of the code is easier to read and more efficient.