Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

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.



This was my 'before' code:
 Before Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>ScrollTop test</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
div#message {
position: fixed;
right: 0;
top: 0;
color: red;
font-size: 300%;
}
</style>
</head>
<body>
<div id="body">
<div id="message"></div>
</div>
<div id="content" style="display: none; margin: 1em;"></div>
<script>
$(document).ready(function() {
/* generate some content */
for (var i = 0; i < 100; i++) {
$('#content').clone().text('Content item ' + i).show().appendTo($('#body'));
}
$(document).scroll(function(e) {
var scrollTop = $(window).scrollTop();
$('#message').text('Scroll Top: ' + scrollTop);
});
});
</script>
</body>
</html>




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:
 CSS
div#body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}


The second modification was to change the $(document).scroll() to this code:
 JavaScript
$('#body').scroll(function(e) {
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.

You can get the source code for the before and after code on my GitHub - before code and after code.

-i

Skip down to comments...
Hope you found this post useful...

...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.
 
comments powered by Disqus
Other posts you may like...