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
