NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the FAQ for more details.
I've recently discovered that on Mobile Safari the $(window).scrollTop() would not update during the scroll event animation. It appeared to only update after the scroll (the elastic scroll) had finished its animation. This was a rather annoying 'feature' for me because I needed to update my UI during the animation, so I went looking for a workaround and here's what I've come up with.
Below are two videos showing the before and after the workaround. The first video shows the default behaviour where scrollTop() is only updated after the scroll event completes, the second video shows a workaround that has continuous updates during scrolling.
The main part of the code was the $(document).scroll() event handler. There the $(window).scrollTop() is looked up and set as text for display. Nothing fancy. That was the code for the first video.
My workaround to make continuous scrolling work added a couple of modifications...
First I set my div#body style so that it stretched to the size of the viewport, like so:
The second modification was to change the $(document).scroll() to this code:
var scrollTop = $(e.target).scrollTop();
$('#message').text('Scroll Top: ' + scrollTop);
The workaround responds to scroll events on the div#body instead and looks up scrollTop() on that DIV element instead of on the window object. This way continuous scroll events can be detected. The modified code was used in the second video.
...so please read on! I love writing articles that provide beneficial information,
tips and examples to my readers. All information on my blog is provided free of
charge and I encourage you to share it as you wish. There is a small favour I ask in return however -
engage in comments below, provide feedback, and if you see mistakes let me know.
If you want to show additional support and help me pay for web hosting and
domain name registration,
donations, no matter how small, are always welcome!
Use of any information contained in this blog post/article is subject to this disclaimer.