0

Im trying to do an animation when a user scrolls a page. I'm using window.pageYOffset. In Safari it works as soon as scroll starts, but in Chrome it will only detect the scroll after touch end. How can I detect scrolling while its happening, not at the very end?

window.addEventListener('scroll', function(e){
   var distanceY = window.pageYOffset
   if (distanceY > 0) {
      DO STUFF
   }
});

This functions alright on desktop browsers and mobile Safari, but not in mobile Chrome.

Here is the tutorial that I was using, it has this problem as well - in mobile Safari the animation would happen when the screen is scrolled just to the second paragraph, but in Chrome it will stay static until touch end.

skyisred
  • 6,855
  • 6
  • 37
  • 54
  • As far as I know many mobile browsers freeze any rendering/script execution during a scroll because redrawing while scrolling can be super intensive, depending on how far and fast you're scrolling. – Jared Sep 11 '15 at 06:40

1 Answers1

3

You can try this code below:

$('window').on('touchmove', function(event) {

    event.preventDefault(); 

    var distanceY = window.pageYOffset
    if (distanceY > 0) {
     // DO STUFF
    }
});

Also because of some reason Chrome fires window.resize event on scroll. You can find the issue on link.

Community
  • 1
  • 1
guvenckardas
  • 738
  • 4
  • 8