Question

我试图制造视差效果。是的，我知道有现成的解决方案，但为了自我教育的目的，我决定从头开始写这篇文章并且用＃34; plain＆＃34; js（没有jq）。所以我面对的问题是＆＃34;层＆＃34;我通过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元素，视差变量存储视差图层本身。

PS：那些我在chrome上看到的震动，firefox有微型飞机。我认为这两个细微差别的根本原因可以在同一个问题中讨论。

抱歉我的英语不好

Answer 1

已经解决了。我已经用这种方式覆盖了默认的鼠标滚轮功能。

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

也许这不是最好的解决方案，但它运作正常。卷轴上的震动消失了。

平滑的视差效果

1 个答案: