javascript - 为什么执行此视差脚本时我的图像会跳动几个像素？

Question

我不是 JavaScript 专家，所以我不太明白为什么我的代码会这样做:

首次加载页面并滚动时，目标图像上下跳动约30px

var parallax = document.querySelectorAll(".headerphotosmall, .headerphoto"),
    speed = 0.9;

window.onscroll = function(){
    [].slice.call(parallax).forEach(function(el,i){

        var windowYOffset = window.pageYOffset,
            elBackgrounPos = "50%" + (windowYOffset * speed) + "px";

        el.style.backgroundPosition = elBackgrounPos;

    });
};

显示我的问题的视频:https://i.gyazo.com/040f328ac78a5d5243e37352e19e0cf6.mp4

Answer 1

我认为@BeyelerStudios 的评论解释了这个问题...图像的初始位置与初始滚动位置无关。

^{虽然我不知道什么是视差...}

由于我不知道您的 CSS，因此我尝试在脚本运行时使用 Array#forEach 循环自动更新视差图像的位置。如果您稍后声明这些背景图像，则需要等待页面加载。

var parallax, speed;
var updateBgImagePos, updateParallaxPosition;

// Converts parallax HTML collection to
// Array
parallax = [].slice.call(
    document.querySelectorAll(".headerphotosmall, .headerphoto")
);

speed = 0.9;

updateBgImagePos = function(el, i) {
    var windowYOffset = window.pageYOffset,
        elBackgrounPos = "50%" + (windowYOffset * speed) + "px";

    el.style.backgroundPosition = elBackgrounPos;
};

updateParallaxPosition = function() {
    parallax.forEach(updateBgImagePos);
};

window.onscroll = updateParallaxPosition;

// If your script is declared later than the images,
// you don't need to wait the page to load  to
// get/modify them.
updateParallaxPosition();