使用element.onmousewheel在子元素上的鼠标滚轮轮动条

如何在 JavaScript 中使用鼠标滚轮禁用滚动

在触发的函数中使用element.onmousewheel返回false使鼠标滚轮不滚动页面，返回true将开启鼠标滚轮滚动页面

这里的onmousewheel不能用addEventListener('mousewheel',funtion(){return false})代替，否则没有作用

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

需要注意的是，这里的窗口会禁用页面中的所有鼠标滚轮来触发滚轮条。如果您只需要滚动某个元素，请将其替换为相应的 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
    }
})

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-380225-1.html