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

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

Answer 1

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

请注意，如果隐藏溢出，则默认滚动function会丢失，因此您必须自己创建。 为此，您可以在有问题的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) }) 

适合我。 改编自如何获得wheelDelta属性？

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