平滑视差效果

Question

我正在尝试制作视差效果。 是的，我知道有现成的解决方案，但是出于自我教育的目的，我决定从头开始使用“纯” js（无jq）编写此解决方案。 因此，我遇到了一个问题，即我通过js处理的“图层”晃动了，仅当我用鼠标滚轮滚动页面时才会出现。 使用滚动条手动滚动可以正常工作。 我使用此代码进行图层更新：

window.onscroll = function () {
    requestAnimFrame(scrollCalc);
}

scrollCalc = function() {
    for (var i = 0; i < parallaxes.length; i++) {
        var offset = (parallaxParents[i].getBoundingClientRect().top) * (-1) * parallaxes[i].magnitude;
        parallaxes[i].style.transform = "translate3d(0, " + offset + "px, 0)";
    }
}

requestAnimFrame = (
    window.requestAnimationFrame       ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    window.oRequestAnimationFrame      ||
    window.msRequestAnimationFrame     ||
    function(callback) {
        setTimeout(callback, 1000 / 60);
    }
);

parallaxParents变量存储视差层的父dom元素，而parallaxes变量存储视差层本身。

PS：我在镀铬上看到的那些抖动，Firefox有微小的滞后。 我认为，这两个细微差别的根本原因可以在同一期中解决。

对不起，我英语不好

Answer 1

已经解决了。 我以这种方式覆盖了默认的mousewheel功能。

    window.onmousewheel = function (e) {
        e.preventDefault();
        window.scrollTo(window.pageXOffset + e.deltaX/scrollRatio, window.pageYOffset + e.deltaY/scrollRatio)
    }

也许这不是最好的解决方案，但是效果很好。 滚动上的震动消失了。