JS関数は別々に動作しますが、一緒には動作しません

Question

私はバックグラウンド位置をシフトし、ズームのdivの背景に2つの関数を使用しています。ここで彼らは、次のとおりです。

(function(shifting) { 

    var parallax = document.querySelectorAll(".shiftparallax"), 
     speed = -0.05; 

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

      var windowXOffset = window.pageYOffset, 
       elBackgrounPos = (windowXOffset * speed) + "px"; 
      console.log(elBackgrounPos); 
      el.style.backgroundPositionY = elBackgrounPos; 

     }); 
    }; 

})(); 


(function(zooming) { 
    var parallaxfacts = document.querySelectorAll(".parallaxfacts"), 
     constantsize = 100; 
    speed = -0.03; 
    window.onscroll = function() { 

     if (window.innerWidth > 1024) { 
      [].slice.call(parallaxfacts).forEach(function(el, i) { 

       var windowXOffset = window.pageYOffset, 
        elBackgrounScale = (windowXOffset/950 * constantsize) + "%"; 

       el.style.backgroundSize = elBackgrounScale; 

      }); 
     } 
    }; 

})(); 

問題は、私はそれらの両方を同時に実行する必要があるが、彼らはのみ別途実行することです。それらが両方のように書かれていれば、第2のものは実行され、第1のものは何もしません。私が2番目を削除すると、最初のものが動作し始めます。私は最近JSで少し錆びているので、私はそれを理解できません。それらを両方とも機能させる方法はありますか？

window.onscroll = el => console.log ('first'); 
window.onscroll = el => console.log ('second'); 

は、次のコードを使用して...あなたが二回window.onscrollに代入している

window.addEventListener('scroll', el => console.log ('firstlistener')); 
window.addEventListener('scroll', el => console.log ('secondlistener')); 

Answer 1

：

Answer 2

あなたはwindow.onscrollイベントに

してみてください。この2行を上書きします。つまり、2番目のハンドラは最初のハンドラを「登録解除」します。

あなたは、両方の機能でイベントに耳を傾けるaddEventListenerを使用することができます。

window.addEventListener("scroll", function() { /* function 1*/ }); 
window.addEventListener("scroll", function() { /* function 2*/ });