JAVASCRIPT 只有第一个函数在我的 window.onscroll 函数上工作答案

【问题标题】：JAVASCRIPT only the first function is working on my window.onscroll functionJAVASCRIPT 只有第一个函数在我的 window.onscroll 函数上工作
【发布时间】：2020-11-21 19:35:15
【问题描述】：

我是 javascript 新手，我试图让这两个函数根据滚动位置在不同时间运行，但只有第一个函数“myFunction1”正在运行。请帮忙。

<script>
 

window.onscroll = function redblob() {myFunction()

function myFunction() {
  if (document.body.scrollTop > 250 && document.body.scrollTop < 1200 || 
  document.documentElement.scrollTop > 250  && document.documentElement.scrollTop < 1200  ) {
    document.getElementById("redblob").classList.add('scale-transition');
  } 

 
  else {
    document.getElementById("redblob").classList.remove('scale-transition');
  }
  
  
}

function myFunction2() {
  if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 || 
  document.documentElement.scrollTop > 1200  && document.documentElement.scrollTop < 1700  ) {
    document.getElementById("blueblob").classList.add('scale-transition');
 
  } 

 
  else {
    document.getElementById("blueblob").classList.remove('scale-transition');
 
  }
  
  
}
};
  
</script>

【问题讨论】：

标签： javascript arrays function if-statement onscroll

【解决方案1】：

您正在重用函数名 myFunction()。我将第二个重命名为 myFunction1() （这就是你所说的应该在你的问题中命名）并在它之前添加了一个函数声明。这导致错误消失。

<script>
 
window.onscroll = function redblob() {
    function myFunction() {
        function myFunction1() {
            if ((document.body.scrollTop > 250) && (document.body.scrollTop < 1200) || (document.documentElement.scrollTop > 250) && (document.documentElement.scrollTop < 1200)) {
                document.getElementById("redblob").classList.add('scale-transition');
            } else {
                document.getElementById("redblob").classList.remove('scale-transition');
            }
        }

        function myFunction2() {
            if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 || document.documentElement.scrollTop > 1200 && document.documentElement.scrollTop < 1700) {
                document.getElementById("blueblob").classList.add('scale-transition');
            } else {
                document.getElementById("blueblob").classList.remove('scale-transition');
            }
        }
    }
}

</script>

【讨论】：

【解决方案2】：

感谢您的帮助 Daniel，因为您注意到我确实重用了函数名称 myFunction。我将名称更改为 function1 并将其添加到第一个函数中，它运行良好。

window.onscroll = function functionname() { myFunction2(); myFunction1(); 

function myFunction1() {
  if (document.body.scrollTop > 250 && document.body.scrollTop < 1200 || 
  document.documentElement.scrollTop > 250  && document.documentElement.scrollTop < 1200  ) {
    document.getElementById("redblob").classList.add('scale-transition');

  } 

 
  else {
    document.getElementById("redblob").classList.remove('scale-transition');

  }
  
  
}

function myFunction2() {
  if (document.body.scrollTop > 1200 && document.body.scrollTop < 1700 || 
  document.documentElement.scrollTop > 1200  && document.documentElement.scrollTop < 1700  ) {
    document.getElementById("blueblob").classList.add('scale-transition');

  } 

 
  else {
    document.getElementById("blueblob").classList.remove('scale-transition');

  }
  
  
}
};

【讨论】：