在DIV中阻止鼠标滚动 [英] Block Mouse Scroll inside DIV

问题描述

如何使用 id =slider - '。$ question_id。'阻止div中的鼠标滚动。

所以基本上如果你把鼠标放在那个div上，点击它你将无法使用鼠标滚动滚动。

So basically if you put mouse over that div, click it you will not be able to scroll using mouse scroll.

<div id="slider-'.$question_id.'"> CONTENT </div>

我只想找到 JavaScript

我的代码如下，但是这会阻止整个页面：

I have code below, but this is blocking whole page:

<script type='text/javascript'>
document.onmousewheel = function(){ stopWheel(); } /* IE7, IE8 */
if(document.addEventListener){ /* Chrome, Safari, Firefox */
    document.addEventListener('DOMMouseScroll', stopWheel, false);
}

function stopWheel(e){
    if(!e){ e = window.event; } /* IE7, IE8, Chrome, Safari */
    if(e.preventDefault) { e.preventDefault(); } /* Chrome, Safari, Firefox */
    e.returnValue = false; /* IE7, IE8 */
}
</script>

推荐答案

您可以使用event.target来识别是否滚动元素是你想要影响的元素：

You can use event.target to identify if the scrolling element is the one you want to affect:

function stopWheel(e){
    if (e.target.id === "slider-'.$question_id.'") {
        if(!e){ e = window.event; } /* IE7, IE8, Chrome, Safari */
        if(e.preventDefault) { e.preventDefault(); } /* Chrome, Safari, Firefox */
        e.returnValue = false; /* IE7, IE8 */
    }
}  

另外你需要在第一次通话中提供活动：

Plus you need to provide the event in the first call:

document.onmousewheel = function (e) {
    stopWheel(e);
} /* IE7, IE8 */

以下是一个例子： http://jsfiddle.net/Da3L3/

这篇关于在DIV中阻止鼠标滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！