有没有办法在滚动事件之前采取行动？ [英] Is there a way to act before the scroll event?

问题描述

所以我发现：

  e.preventDefault（）
 e.stopPropagation（）; 
返回false; 
  

如果触发事件是滚动，则不做任何操作。

然而，有没有在击发顺序中击败滚动事件？

  body {
宽度：100％; 
 height：2000px; 
 
 $ b $（document）.on（'scroll'，function（e）{
 $（'body'）。css（'overflow'，'hidden'） ; 
 setTimeout（function（）{
 $（'body'）.css（'overflow'，'auto'）
}，100）
}）; 
  

上面的代码不起作用，事件触发器会触发，但文档会在每次隐藏溢出之前滚动时间。然而，如果在事件传播之前可以隐藏溢出，那么这将起作用。

这可能吗？

我对防止滚动不感兴趣，实际上我在滚动事件上有元素移动位置。在Firefox中，事情并不那么明显，但是在chrome（特别是IE）中，移动显然是在滚动后发生的。

解决方案

您需要处理以下事件：

• 滚轮（当您使用鼠标滚轮时）
  
• mousedown（当你点击文档的滚动条滚动时）
/ li>

如果您需要停止滚动，则只需添加preventDefault即可。

这些是在滚动事件之前触发的。

片段：

$（document）.on（'wheel mousedown keydown'，function（e）{if（e.type == 'e'type =='keydown'&&（（e.ctrlKey&&（e.keyCode == 36 || e。其中== 35））||（！e.ctrlKey&&（e.keyCode == 33 || e.which == 34 || e.which == 38 || e.which == 40）） ））{console.log（e.type +'event'）; //你可能想要防止滚动：add next line + return; // //e.preventDefault（）; $（'body'）。 css（'overflow'，'hidden'）; setTimeout（function（）{$（'body'）。css（'overflow'，'auto'）}，100）}}）;

  body {width：100％; height：2000px;}  

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< /脚本>

So I discovered that

e.preventDefault()
e.stopPropagation();
return false;

Do nothing if the triggering event is a scroll,

However, is there anyway to 'beat' the scroll event in firing order?

body{
   width: 100%;
   height: 2000px;
}

$(document).on('scroll', function(e){
    $('body').css('overflow','hidden');
    setTimeout(function(){
       $('body').css('overflow','auto')
    },100)
});

The above code does not work, the event trigger fires but the document scrolls before overflow is hidden every single time. however if the overflow can be hidden before the event propagates then this would work.

Is this possible?

I'm not interested in just preventing scrolling, I actually have element moving position on a scroll event. Things aren't as noticeable in Firefox, however in chrome(and especialy IE), the move clearly happens after the scroll.

解决方案

You need to handle the following events:

• wheel (when you use the mouse wheel)
• mousedown (when you click on the scroll bar of the doc to scroll)
• keydown (ctrl+home, ctrl+hend, down-up arrow, pgdown and pgup: keyboard scrolling)

If you need to stop the scrolling at all it's enough you add the preventDefault.

These are fired before scroll event.

The snippet:

$(document).on('wheel mousedown keydown', function(e){
  if (e.type == 'wheel' || e.target.tagName == 'HTML' ||
      (e.type == 'keydown' && ((e.ctrlKey && (e.keyCode  == 36 || e.which == 35)) ||
                               (!e.ctrlKey && (e.keyCode  == 33 || e.which == 34 || e.which == 38|| e.which == 40))))
     ) {
    console.log(e.type + ' event');

    //you may want to prevent the scroll: add next line + return;
    //
    //e.preventDefault();
    $('body').css('overflow','hidden');
    setTimeout(function(){
      $('body').css('overflow','auto')
    },100)
  }
});

body{
  width: 100%;
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这篇关于有没有办法在滚动事件之前采取行动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！