Javascript 在溢出时捕获滚动事件：隐藏元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8378243/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Catch scrolling event on overflow:hidden element
提问by Markus J?nsson
Any insights on how to catch a scrolling event on a element that has overflow:hidden? I would like to scroll in a column without showing a scrollbar to the user.
关于如何在溢出的元素上捕获滚动事件的任何见解：隐藏？我想在不向用户显示滚动条的情况下滚动列。
回答by anson
This is actually a somewhat indepth process. What I do is set global flags when users mouse enters and leaves the element that you want to scroll. Then, on the mousewheel event for the body I check to see if the MOUSE_OVER flag is true, then stop propagation of the event. This is so the main body doesnt scroll in case your entire page has overflow.
这实际上是一个有点深入的过程。我所做的是在用户鼠标进入和离开要滚动的元素时设置全局标志。然后，在 body 的 mousewheel 事件上，我检查 MOUSE_OVER 标志是否为真，然后停止事件的传播。这样主体就不会滚动，以防整个页面溢出。
Note that with overflow hidden, the default scrolling ability is lost so you must create it yourself. To do this you can set a mousewheel listener on your div in question and use the event.wheelDelta property to check whether the user is scrolling up or down. This value is different according to browser, but it is generally negative if scrolling down and positive if scrolling up. You can then change position of your div accordingly.
请注意，隐藏溢出后，默认滚动功能将丢失，因此您必须自己创建它。为此，您可以在有问题的 div 上设置鼠标滚轮侦听器，并使用 event.wheelDelta 属性检查用户是向上还是向下滚动。该值因浏览器而异，但通常向下滚动时为负值，向上滚动时为正值。然后，您可以相应地更改 div 的位置。
This code is hacked up quickly but it would essentially look like this...
这段代码很快就被破解了，但它本质上看起来像这样......
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
}
});
回答by maxedison
I use overflow:scroll, but also Absolutely position a div over the scroll bar in order to hide it.
我使用溢出：滚动，但也绝对在滚动条上放置一个 div 以隐藏它。
回答by Neil
$("body").css("overflow", "hidden")
$(document).bind('mousewheel', function(evt) {
var delta = evt.originalEvent.wheelDelta
console.log(delta)
})
works for me. adapted from How do I get the wheelDelta property?
为我工作。改编自如何获得wheelDelta 属性？
回答by Nebulosar
$("div").on('wheel', function (e) {
if (e.originalEvent.deltaY < 0) {
console.log("Scroll up");
} else {
console.log("Scroll down");
}
});
This did the trick for me. JSFiddle
这对我有用。 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>