在溢出时捕获滚动事件：隐藏元素

Question

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

原文由 Markus Jönsson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

请注意，隐藏溢出后，默认的滚动功能将丢失，因此您必须自己创建它。为此，您可以在相关的 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
  }
});

原文由 anson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我使用 overflow:scroll，但也将 div 绝对定位在滚动条上以隐藏它。

原文由 maxedison 发布，翻译遵循 CC BY-SA 3.0 许可协议