Mac users knows that there is a very soft page scrolling with touchpad. But when you scroll page with a mouse wheel or even with browser scrollbar - page scrolls not soft, but with some breaks. It happens because of scrollTop difference because it renders not every pixel change.
Is there a way to make cross-browser soft page scrolling like touchpad? I was trying to use this code:
$window = $(window);
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
function wheel(event) {
var delta = 0;
if (event.wheelDelta) delta = event.wheelDelta / 90;
else if (event.detail) delta = -event.detail / 3;
handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
var goUp = true;
var end = null;
var interval = null;
function handle(delta) {
var animationInterval = 20; //lower is faster
var scrollSpeed = 20; //lower is faster
if (end == null) {
end = $window.scrollTop();
}
end -= 20 * delta;
goUp = delta > 0;
if (interval == null) {
interval = setInterval(function () {
var scrollTop = $window.scrollTop();
var step = Math.round((end - scrollTop) / scrollSpeed);
if (scrollTop <= 0 || scrollTop >= $window.prop("scrollHeight") - $window.height() || goUp && step > -1 || !goUp && step < 1 ) {
clearInterval(interval);
interval = null;
end = null;
}
$window.scrollTop(scrollTop + step );
}, animationInterval);
}
}p:nth-child(10n) {background-color: #d00}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>And this code works perfectly in Google Chrome and Opera. But Mozilla and Safari don't show similar soft scroll. They are scrolls content too slowly.
Is there another way to make soft page scroll?
