JS-Funktionen arbeiten separat, aber nicht zusammen

Question

Ich verwende zwei Funktionen, um die Hintergrundposition zu verschieben und den Hintergrund von div zu vergrößern. Hier sind sie:

(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; 

      }); 
     } 
    }; 

})(); 

Das Problem ist, dass ich sie brauchen beides zugleich zu laufen, aber sie nur separat ausgeführt werden. Wenn sie beide so geschrieben sind - der zweite läuft nur und der erste tut nichts. Wenn ich den zweiten entferne, fängt der erste an zu arbeiten. Ich habe in letzter Zeit ein wenig eingerostet, damit ich es nicht herausfinden kann. Gibt es einen Weg, sie beide arbeiten zu lassen?

Answer 1

Sie zweimal window.onscroll zuweisen. Das bedeutet, dass der zweite Handler den ersten "abmeldet".

Sie können addEventListener verwenden, um den Fall, in beiden Funktionen zu hören:

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

Answer 2

Sie überschreiben die window.onscroll Ereignis

versuchen, diese beiden Zeilen:

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

den folgenden Code verwenden ...

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