I have a div with scrollable content that, with a certain scrollTop value, goes back to the beginning.
var container = document.getElementById('container');
function scroll_function() {
var new_position_top = container.scrollTop;
if (new_position_top > 600) {
container.scrollTop = 0;
}
}
container.addEventListener('scroll', scroll_function);
#container {
width: 300px;
height: 300px;
overflow: auto;
border: 1px solid black;
-webkit-overflow-scrolling: touch;
}
span {
width: 100%;
height: 1200px;
float: left;
background: red;
background: -webkit-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);
}
<div id="container">
<span></span>
</div>
JSFiddle .
Using the MacBook Trackpad I have different behaviors: Chrome and Safari work as I expected, continuing inertia, returning to the top.
Firefox , however, returns to the top and stops inertia.
Using iOS Safari , a similar problem appears, since the scrollTop position is not updated until the inertia has ended.
Is there a better way to get closer to it, or a way to fix the behavior of Firefox and iOS Safari?