I've been trying to add easing to Website scrolling using native Javscript. This works flawlessly across all browsers on macOS but doesn't seem to be working in Windows and I'm not quite sure why?
Here is my Javascript
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 / 80; //controls how sensitive the scroll wheel is (lower the number = the more sensitive)
else if (event.detail) delta = -event.detail / 50;
handle(delta);
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
var goUp = true;
var end = null;
var interval = null;
function handle(delta) {
var animationInterval = 10; // How long it lasts
var scrollSpeed = 30; // how far it will go
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);
}
}