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

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

这实际上是一个有点深入的过程。我所做的是在用户鼠标进入和离开要滚动的元素时设置全局标志。然后，在主体的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
  }
});

$("body").css("overflow", "hidden")
$(document).bind('mousewheel', function(evt) {
    var delta = evt.originalEvent.wheelDelta
    console.log(delta)
})

适用于我。改编自《我如何获得wheelDelta房产？》？

我使用溢出：滚动，但也绝对将div放在滚动条上以隐藏它。

我编辑了@anson对Vanilla Javascript的回答，因为它可能对其他人有用。还要注意，">鼠标滚轮"；事件被否决。所以我的代码使用">轮子"；相反除此之外，我还添加了箭头函数，用于实际访问"；这个"；。

fixScrollBehavior(elem) {
                elem.addEventListener('scroll', (e) => {
                    console.log('scrolling');
                });
                let MOUSE_OVER = false;
                elem.addEventListener('wheel', (e) => {
                    if (MOUSE_OVER) {
                        if (e.preventDefault) {
                            e.preventDefault();
                        }
                        e.returnValue = false;
                        return false;
                    }
                });
                elem.addEventListener('mouseenter', () => {
                    MOUSE_OVER = true;
                });
                elem.addEventListener('mouseleave', () => {
                    MOUSE_OVER = false;
                });
                elem.addEventListener('wheel', (e) => {
                    let delta = e.wheelDelta;
                    if (delta > 0) {
                        //go up
                    } else {
                        //go down
                    }
                });
            }

注意，这并不能修复移动触摸-"；滚动"；s.

$("div").on('wheel', function (e) {
        if (e.originalEvent.deltaY < 0) {
        console.log("Scroll up");
    } else {
        console.log("Scroll down");
    }
});

这对我有好处。JSFiddle

StackFiddle:

$("div").on('wheel', function(e) {
  if (e.originalEvent.deltaY < 0) {
    console.log("Scroll up");
  } else {
    console.log("Scroll down");
  }
});

div {
  height: 50px;
  width: 300px;
  background-color: black;
  overflow: hidden;
}

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

我迟到了，但我想我有更好的答案。

将你的容器设置为overflow: overlay，这将释放滚动条的空间，然后设置滚动条的样式或隐藏它，或者使其句柄高度/宽度为0，

然后你也应该得到滚动事件。

注意：并非所有web浏览器都支持设置滚动条的样式。

相关内容

最新更新

热门标签：