如何停止重复滚动事件？ [英] how do I stop scroll events from recurring?

问题描述

你好！请问任何人可以帮助我处理我网站上的活动吗？问题是，每次滚动事件被触发时它们都会继续发生。导航菜单位于标题下但在滚动时粘在顶部，但是当我们向后滚动时，我希望它返回到标题下方。我不知道我做错了什么。这是我的代码

  var  navigation =  document  .querySelector（  nav）; 
  var  borderBottom = navigation.getAttribute（ 边界底部）; 
  var  currentDistance =（ document  .documentElement.scrollHeight）; 
 
 addEventListener（  scroll， function （）{
 
  if （currentDistance>   90px）{
 navigation.style.position =   fixed; 
 navigation.style.top =   0; 
 navigation.style.borderBottom =   3px solid rgb（157,0,53） ; 
} 
 
  else  removeEventListener（  scroll， function （）{
 navigation.style.position =   fixed; 
 navigation.style.top =   0; 
 navigation.style.borderBottom =   3px solid rgb（157,0,53） ; 
} 
）; 
}）; 

当页面加载并且滚动事件被触发时，div会进入，这就是我想要的。但我的问题是，每次触发滚动事件时，框都会继续飞行，而不是停止事件，即保持REOCCURRING。下面是我用它的代码。

  var  flyInDiv = < span class =code-sdkkeyword> document  .getElementById（  flyInDiv）; 
 
 addEventListener（  scroll， function （）{
  var  programMenu =  document  .createElement（< span class =code-string>  DIV）; 
 
 programMenu.className =   programMenu; 
 programMenu.appendChild（flyInDiv）; 
 
  document  .body.appendChild（programMenu）; 
 
 programMenu.style.position =  已修复; 
 
}）; 

网址到我的网站是agwconitsha.org



非常感谢大家!!

解决方案

这不是多么粘元素已实现。你真的不需要处理这个事件。您的要求不明确，但您可以找到很多代码示例，用于设计的不可滚动部分。但如果这不是你想要的，你需要描述你想要精确实现的行为。



现在，你不太清楚你的意思是重复出现，但是如果您只是需要在处理事件后停止传播事件，则可以执行以下两项操作：使用事件实例的方法 preventDefault（）并从中返回false处理程序。请参阅： https://developer.mozilla.org/en-US/docs/Web / API / Event / preventDefault [ ^ ]。



参见：

https://developer.mozilla.org/en-US/docs/Web/API/Event [ ^ ]，

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation [ ^ ]，

https://developer.mozilla .org / zh-CN / docs / Web / API / Event / stopPropagation [ ^ ]，

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation [ ^ ]。



首选方法是使用事件方法。基于返回值的方法主要用于潜在地改进与某些浏览器的兼容性，这些浏览器可能不符合现代标准;而这个回报价值的含义有点争议。有关详细信息，请参阅此问题的答案：

http://stackoverflow.com/questions/18971284/event-preventdefault-vs-return-false-no-jquery [ ^ ]。

-SA

Hi there! please can anyone help me with the events on my site?the issue is, they keep re occurring each time the scroll event is fired. the navigation menu is under the header but stickies to top on scroll but i want it to go back under the header when we scroll all the way back up. I don't know what I'm doing wrong. here's my code

var navigation = document.querySelector("nav");
var borderBottom = navigation.getAttribute("border-bottom");
var currentDistance = (document.documentElement.scrollHeight);

addEventListener ("scroll", function() {

    if (currentDistance > "90px") {
        navigation.style.position = "fixed";
        navigation.style.top = "0";
        navigation.style.borderBottom = "3px solid rgb(157,0,53)";
    }
    
    else removeEventListener ("scroll", function() {
        navigation.style.position = "fixed";
        navigation.style.top = "0";
        navigation.style.borderBottom = "3px solid rgb(157,0,53)";
    }
);
});

also when the page loads and the scroll event is fired, a div flys in, which is what i want. but my problem is that each time that scroll event is fired, the box keeps flying in instead of the event stopping i.e keeps REOCCURRING. heres the code i used for it.

var flyInDiv = document.getElementById("flyInDiv");

addEventListener ("scroll", function() {
    var programMenu = document.createElement("DIV");
    
    programMenu.className = "programMenu";
    programMenu.appendChild(flyInDiv);
    
    document.body.appendChild(programMenu);
    
    programMenu.style.position = "fixed";

});

the URL to my site is agwconitsha.org

many thanks guys!!

解决方案

This is not how sticky element is implemented. You don't really need to handle this event. Your requirement is not clear, but you can find a lot of code samples for non-scrollable part of the design. But if this is not exactly what you want, you need to describe the behavior you want to implement precisely.

Now, it's not quite clear what you mean by "recurring", but if you simply need to stop propagation of the event after you handled it, you can do two things: use your event instance's method preventDefault() and return false from the handler. Please see: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault[^].

See also:
https://developer.mozilla.org/en-US/docs/Web/API/Event[^],
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation[^],
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation[^],
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation[^].

Preferred method is using the Event method. The approach based on return value is mostly used for potential improvement of compatibility with some browsers which may behave not according to the contemporary standards; and the meaning of this return value is somewhat controversial. For further detail, please see the answers to this question:
http://stackoverflow.com/questions/18971284/event-preventdefault-vs-return-false-no-jquery[^].

—SA

这篇关于如何停止重复滚动事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！