溢出时捕获滚动事件：隐藏元素 [英] Catch scrolling event on overflow:hidden element

问题描述

有关如何捕获具有溢出的元素的滚动事件的任何见解：隐藏？我想滚动一列而不向用户显示滚动条。

Any insights on how to catch a scrolling event on a element that has overflow:hidden? I would like to scroll in a column without showing a scrollbar to the user.

推荐答案

这实际上是一个有点深入的过程。我做的是当用户鼠标进入并离开要滚动的元素时设置全局标志。然后，在body的mousewheel事件中，我检查MOUSE_OVER标志是否为true，然后停止传播事件。这是主体不会滚动，以防整个页面溢出。

This is actually a somewhat indepth process. What I do is set global flags when users mouse enters and leaves the element that you want to scroll. Then, on the mousewheel event for the body I check to see if the MOUSE_OVER flag is true, then stop propagation of the event. This is so the main body doesnt scroll in case your entire page has overflow.

请注意，如果隐藏了溢出，则默认滚动功能会丢失，因此您必须自己创建。为此，您可以在有问题的div上设置鼠标滚轮侦听器，并使用event.wheelDelta属性检查用户是向上还是向下滚动。根据浏览器，此值不同，但如果向下滚动则通常为负，如果向上滚动则为正。然后你可以相应地改变你的div的位置。

Note that with overflow hidden, the default scrolling ability is lost so you must create it yourself. To do this you can set a mousewheel listener on your div in question and use the event.wheelDelta property to check whether the user is scrolling up or down. This value is different according to browser, but it is generally negative if scrolling down and positive if scrolling up. You can then change position of your div accordingly.

这段代码很快被黑了，但它基本上就是这样......

This code is hacked up quickly but it would essentially look like this...

var MOUSE_OVER = false;
$('body').bind('mousewheel', function(e){
  if(MOUSE_OVER){
    if(e.preventDefault) { e.preventDefault(); } 
    e.returnValue = false; 
    return false; 
  }
});

$('#myDiv').mouseenter(function(){ MOUSE_OVER=true; });
$('#myDiv').mouseleave(function(){ MOUSE_OVER=false; });

$('#myDiv').bind('mousewheel', function(e){
  var delta = e.wheelDelta;
  if(delta > 0){
    //go up
  }
  else{
    //go down
  }
});

这篇关于溢出时捕获滚动事件：隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！