この視差スクリプトを実行すると、画像が数ピクセル飛び越えてしまうのはなぜですか？

Question

私のコードは、このない、なぜ私は本当に理解していけないので、私はjavascriptの男ではない午前：最初のページをロードしてスクロールすると

、対象画像は私の問題を示す

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; 

    }); 
}; 

30pxについてのビデオ上下にジャンプします： 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();