Question

我正在用javascript在我的页面之一中添加滚动事件。代码是这样的：

    document.getElementById("myProject").addEventListener("scroll", myFunction);

     function myFunction() {
     document.getElementById("scrollEvent").innerHTML = "These are all my projects so far";

     }

因此，当用户开始滚动时，他们将看到文本“到目前为止，这些都是我所有的项目”。

我的问题是当用户移动到另一个页面时如何停止显示此文本。

请提供帮助（我是一个很新鲜的开发商）非常感谢

Answer 1

一些想法。

在不了解您的开发环境的情况下（例如，您是否在框架中使用MVC？），我假设您只是在谈论单独的/单独的HTML页面。
每个HTML页面可以有自己的JavaScript。就像HTML和CSS一样，不需要在每个页面上都具有相同的javascript函数。（不是每个页面上都有相同的HTML内容，对吗？）通常，我们将javascript分成多个文件-一些文件添加到每个页面，某些文件特定于某个页面。在每个页面上引用一个（外部）javascript文件，然后在每个页面上使用特定的javascript代码（在引用的第二个外部文件中，或在<script>//js here</script>标记内的HTML页面上），都是最容易的。
如果ID myProject的DIV不在另一页上，则javascript将不执行任何操作。但是，在页面上破坏javascript不好，因此请确保其他页面上未包含它。

如果您使用的是CodeIgniter或ReactJS或Angular等框架，请告诉我们，以便我们可以相应地调整答案。

Answer 2

如果情况是在浏览器选项卡之间切换，则可以使用以下两个不同的事件。

$(window).blur(function(e) {
  // stop scroll event, when switching to another tab
  document.getElementById("myProject").removeEventListener("scroll");
});
$(window).focus(function(e) {
  // start scroll event
  document.getElementById("myProject").addEventListener("scroll", myFunction);
});

我不确定您实际要查找的内容是什么，因为当用户在选项卡之间切换时，无论是否发生滚动事件，他都无法再看到文本。如果您担心性能，那么上述解决方案将有所帮助。

用户移动到另一个页面时如何停止滚动事件功能

2 个答案: