javascript - 在溢出时捕获滚动事件 :hidden element

Question

关于如何在具有overflow:hidden 的元素上捕获滚动事件的任何见解？我想在列中滚动而不向用户显示滚动条。

Answer 1

这其实是一个比较深入的过程。我所做的是在用户鼠标进入和离开要滚动的元素时设置全局标志。然后，在 body 的鼠标滚轮事件上，我检查 MOUSE_OVER 标志是否为真，然后停止传播事件。这样主体就不会滚动，以防整个页面溢出。

请注意， overflow hidden 后，默认的滚动功能将丢失，因此您必须自己创建它。为此，您可以在相关的 div 上设置鼠标滚轮监听器，并使用 event.wheelDelta 属性来检查用户是向上滚动还是向下滚动。该值因浏览器不同而不同，但一般向下滚动时为负，向上滚动时为正。然后您可以相应地更改您的 div 的位置。

这段代码很快就被破解了，但它基本上看起来像这样......

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
  }
});