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

Mar*_*son 29 javascript jquery javascript-events

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

ans*_*son 29

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

请注意,如果隐藏溢出,则默认滚动功能会丢失,因此您必须自己创建它.为此,您可以在有问题的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
  }
});
Run Code Online (Sandbox Code Playgroud)

  • 我没有提到,但你应该调查`event.wheelDelta`和`event.detail`来微调.Firefox使用`event.detail`而其他人使用`event.wheelDelta`并使用这些值,如果你想要复杂的话,你可以找出一些速度控制.此链接将有助于http://www.javascriptkit.com/javatutors/onmousewheel.shtml (3认同)