javascript - 鼠标滚轮滚动事件

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您不想允许滚动的任何元素。

演示

Answer 2

您基本上可以通过为您的 div指定width,height和属性来通过 css 实现它：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>