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

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

2011-12-04 Markus Jönsson

这实际上是一个有点深入的过程。我所做的是在用户鼠标进入和离开要滚动的元素时设置全局标志。然后，在bodywheelwheel事件中，我检查MOUSE_OVER标志是否为真，然后停止事件的传播。这是因为如果整个页面溢出，主体不会滚动。

请注意，在隐藏溢出时，默认的滚动功能会丢失，因此您必须自己创建它。为此，您可以在您的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 
    } 
});

来源

2011-12-04 22:04:59 anson

这很完美。非常感谢你！ :) –

我没有提到，但你应该看看'event.wheelDelta'和'event.detail'来微调的东西。 Firefox使用'event.detail'，而其他人使用'event.wheelDelta'并使用这些值，你可以找出一些速度控制，如果你想要复杂。此链接将有助于http://www.javascriptkit.com/javatutors/onmousewheel.shtml – anson

mousewheel事件不再起作用。它在现代浏览器中被称为轮子。 – netAction

我使用溢出：滚动，但也绝对定位在滚动条上的div为了隐藏它。

来源

2011-12-04 20:17:05 maxedison

谢谢！如果我找不到任何其他解决方案，可能是最后一个好决议。感觉有点丑陋的方式来解决它虽然。 –

当然，这是一个伎俩，但在我看来是一个非常优雅的。我实际上已经开始编写一个类似@和更多的回复，但是这个CSS技巧发生在我身上。它比JS方法简单得多，这意味着不仅容易实现，而且容易出错。例如， – maxedison

例如，我在5分钟内创建了这个：http://jsfiddle.net/ZGSVj/ – maxedison

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

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

为我工作。改编自How do I get the wheelDelta property?

来源

2015-11-10 00:18:03 Neil

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

来源

2017-10-05 13:21:03 Nebulosar

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

回答

相关问题