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

Did you like this post or found it useful? Considering supporting this Blog to keep its web servers running, any amount helps! Thanks!
Have comments or feedback on what I wrote? Please share them below!
comments powered by Disqus
Other posts you may like...