Question

我试图添加一个在所有浏览器上都能正常运行的平滑滚动（但只有IE11和Edge for microsoft）。问题是这个脚本完全打破了Edge浏览器中的滚动。

我已经包含了控制台日志，它确认脚本正在计算鼠标滚轮移动，但是，没有＆＃34; visual＆＃34;页面的移动。

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);
        }
    );
})();}

为什么不起作用？

Answer 1

这可能是由于事件循环.....在Edge中，questAnimationFrame在渲染后发生。

有关更多信息，请参见杰克·阿奇博尔德的精彩演讲！

https://www.youtube.com/watch?v=cCOL7MC4Pl0

requestAnimationFrame无法在Edge中运行

1 个答案: