JavaScript如何在使用鼠标滚轮时禁止滚动页面

最新推荐文章于 2024-10-24 11:28:09 发布

原创最新推荐文章于 2024-10-24 11:28:09 发布 · 8.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript阻止特定元素或整个页面通过鼠标滚轮进行滚动。通过`element.onmousewheel`设置返回值为`false`可以实现这一目标。文章还提供了如何在子元素上动态控制滚轮行为的方法。

JavaScript如何在使用鼠标滚轮时禁止滚动页面

使用element.onmousewheel在触发的函数里return false就可以鼠标滚动滚轮时不滚动页面，return true则会开启鼠标滚轮滚动页面

这里的onmousewheel不能被addEventListener('mousewheel',funtion(){return false})所代替，不然会没有效果

//return false禁用鼠标滚动页面
window.onmousewheel=function(){
    return false
}
//return true启用鼠标滚动页面
window.onmousewheel=function(){
    return true
}

需要注意是这里的window会禁用页面内全部的鼠标滚轮触发轮动条，如果只需要针对某个元素鼠标滚动则替换成对应的dom结点，但是也会禁用所有包含在内的元素的鼠标滚轮触发轮动条,即使在子元素使用mousewheel=funtion(){return true}，不过配合mouseover和mouseleave来判断鼠标是否在子元素上来动态的启用父元素的滚动条

//这里element是我们要禁用鼠标滚轮触发滚动条的元素
element.children[0].addEventListener('mouseover',function(){
    //在子元素上就启用滚轮
    element.onmousewheel=()=>{
        console.log('启用滚轮')
        return true
    }
})
element.children[0].addEventListener('mouseleave',function(){
     //离开子元素上就禁用滚轮
    element.onmousewheel=()=>{
        console.log('禁用滚轮')
        return false
    }
})