I'm trying to add a smooth scroll that functions properly on all browsers (but only IE11 and Edge for microsoft). The issue is that this script is completely breaking the scroll in Edge browsers.
I've included console logs which confirm that the script is calculating the mousewheel movement, however, there is no "visual" movement of the page.
new SmoothScroll(document, 120, 12);
function SmoothScroll(target, speed, smooth) {
if (target == document) {
target = document.documentElement || document.body.parentNode || document.body; // cross browser support for document scrolling
var moving = false;
var pos = window.pageYOffset;
target.addEventListener("mousewheel", scrolled, false);
target.addEventListener("DOMMouseScroll", scrolled, false);
}
function scrolled(e) {
e.preventDefault(); // disable default scrolling
var delta = e.delta || e.wheelDelta;
if (delta === undefined) {
//we are on firefox
delta = -e.detail;
}
delta = Math.max(-1, Math.min(1, delta)); // cap the delta to [-1,1] for cross browser consistency
pos += -delta * speed;
pos = Math.max(0, Math.min(pos, target.scrollHeight - target.clientHeight)); // limit scrolling
if (!moving) {
update();
}
}
function update() {
moving = true;
var delta = (pos - window.pageYOffset) / smooth;
console.log(window.pageYOffset);
if (window.navigator.userAgent.indexOf("Edge") > -1) {
window.pageYOffset += delta;
}
else {
target.scrollTop += delta;
}
console.log(Math.abs(delta));
if (Math.abs(delta) > 0.5) {
console.log("entered if");
requestFrame(update);
}
else {
moving = false;
}
}
var requestFrame = (function() {
console.log("request frame is triggered");
// requestAnimationFrame cross browser
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(func) {
window.setTimeout(func, 1000 / 50);
}
);
})();}
Why is it not working?
