在网页进行本地滚动时阻止全局滚动事件（阻止鼠标滚轮事件）

标题有点复杂，但这实际上是一个非常简单的问题. 很应该遇到过. 最近，对自动完成插件进行了优化，发现当下拉框中有很多内容时，滚动条就会出现. 如果页面本身具有滚动条，则很容易在两侧滚动，并且体验非常差. 因为我以前从未考虑过此类问题，所以我有信心地进行了思考，应通过技术手段避免这种情况.

我一开始就考虑过听滚动事件，但是发现这个想法本身有一个误解，因为滚动元素本身并阻止窗口滚动是没有意义的，这是另一种思考方式，由于滚动通常是鼠标操作，所以为什么不处理滚轮事件呢？

一个简单的检查，确实有类似的文章. 众所周知，默认情况下jQuery插件不支持鼠标滚轮事件. 现在，我们可以添加跨浏览器的鼠标滚轮支持. 您可以使用jQuery Mousewheel插件，可以通过搜索jquery.mousewheel.js来找到特定的插件，并且这里没有张贴其他地址.

要注意的另一件事是鼠标滚轮事件的增量. 鼠标滚轮的方向和速度可以通过参数delta获得. 如果delta的值为负，则滚轮将向下滚动，如果为正，则滚轮将向上滚动. 这样，我们只需要将鼠标滚动事件绑定到特定元素即可. 当鼠标滚动时，该事件始终被阻止，并且可以根据delta参数调整当前元素. 要实现滚动效果，ScrollTop看起来非常简单，再加上jQuery的Mousewheel插件，基本上每个人都应该知道如何编写，因此在这里我将不做详细介绍.

抛开jQuery插件，并提供直接阻止Mousewheel事件的代码，以测试与常见浏览器的兼容性（IE仅测试了8.0版）.

var preventScroll = function(dom){
        if(dom.jquery){
            dom = dom.get(0);
        }
        if(navigator.userAgent.indexOf('Firefox') >= 0){   //firefox
            dom.addEventListener('DOMMouseScroll',function(e){
                dom.scrollTop += e.detail > 0 ? 60 : -60;
                e.preventDefault();
            },false);
        }else{
            dom.onmousewheel = function(e){
                e = e || window.event;
                dom.scrollTop += e.wheelDelta > 0 ? -60 : 60;
                return false;
            };
        }
    };

在网页进行本地滚动时阻止全局滚动事件（阻止鼠标滚轮事件）

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