Question

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

Answer 1

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

Answer 2

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

Answer 3

$("body").css("overflow", "hidden")

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

适合我。改编自How do I get the wheelDelta property?

Answer 4

$("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>

Answer 5

我编辑了@anson 对Vanilla Javascript 的回答，因为它可能对其他人有用。另请注意，“鼠标滚轮”事件已弃用。所以我的代码使用“wheel”代替。接下来，我添加了箭头功能，以便实际访问“this”。

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

请注意，这并不能修复移动触摸“滚动”。

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

5 个答案: