鼠标滚轮滚动事件

Question

我想要的是：当鼠标指向 div 时，页面的滚动条不会滚动。这是不可能的吗？当我这样做时，页面的滚动条总是滚动。这是一段javascript代码：

if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari

怎么做？

Answer 1

给你：

var noscroll = document.getElementById('noscroll');

var locked, lockedX, lockedY;
noscroll.addEventListener('mouseover', function (){
    locked = true;
    lockedX = window.scrollX;
    lockedY = window.scrollY;
}, false);
noscroll.addEventListener('mouseout', function (){
    locked = false;
}, false);

window.addEventListener('scroll', function (e){
    if(locked === true){
        window.scrollTo(lockedX, lockedY);
        e.preventDefault();
    }
}, false);

将变量 noscroll 更改为您不想允许滚动的任何元素。

Demo

Answer 2

你基本上可以通过css通过为你的div指定width、height和overflow属性来实现它：

<div style="width:100px; height:100px; overflow: auto;" >
    text text text text text text text text text
    text text text text text text text text text
    text text text text text text text text text
    text text text text text text text text text
    text text text text text text text text text
    text text text text text text text text text
    text text text text text text text text text
    text text text text text text text text text
</div>