JS函數單獨工作但不合並

我使用兩個函數來移動背景位置並縮放div的背景。他們是：JS函數單獨工作但不合並

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

      }); 
     } 
    }; 

})();

問題是我需要它們同時運行，但它們只能單獨運行。如果他們都是這樣寫的 - 第二個只運行，第一個什麼都不做。如果我刪除第二個，第一個開始工作。我最近在JS中有點生疏，所以我無法弄清楚。有什麼辦法可以讓他們工作嗎？

來源

2017-07-08 Nebular Dust

請出示你如何調用該函數，什麼條件下。 – Difster

@Difster他們是IIFE（他們自稱）。 – JJJ

你分配給window.onscroll兩次。這意味着第二個處理程序「取消註冊」第一個處理程序。

您可以使用addEventListener聽當事件在兩個功能：

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

來源

2017-07-08 05:24:07 joews

這樣做了。我不知道他們取消了對方。謝謝！ –

就像任何其他財產;如果你'a = {}; a.x = 1; a.x = 2;'，'x'最後是'2'，因爲屬性只能有一個值。 – joews

您覆蓋window.onscroll事件

嘗試這兩條線：

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

使用下面的代碼...

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

來源

2017-07-08 05:23:50

不要在這裏使用'el'。它用作內部函數的變量。 – Xufox

是的，你也可以這樣寫： 'window.addEventListener（'scroll'，（）=> console.log（'secondlistener'））;' –

JS函數單獨工作但不合並

回答

相關問題