网页局部滚动时屏蔽全局滚动事件(屏蔽鼠标滚轮事件)打赏

标题有些绕,其实就是很简单的问题,很多人应该都遇到过,最近优化自动完成的插件,发现在下拉框内容多时出现滚动条的情况下,如果页面本身也有滚动条,就很容易出现两边都滚动的情况,体验非常之差。因为之前没有考虑过此类问题,自信想了下,应该可以通过技术手段避免。

一开始想过监听scroll事件,但是发现这样的想法本身就有误区,因为滚动某个元素本身,而要去屏蔽window的滚动,根本说不通,那么换一种思路,既然滚动通常是鼠标操作,何不操作处理滚轮事件?

简单查了下,的确有类似的文章,我们都知道,jQuery插件默认是不支持鼠标中轮滚轮事件的,现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jQuery的Mousewheel插件,具体插件大家可以搜jquery.mousewheel.js找到,这里不再额外贴地址。

另外要注意的就是,mousewheel事件的delta。通过参数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;
            };
        }
    };
网页局部滚动时屏蔽全局滚动事件(屏蔽鼠标滚轮事件)
文章《网页局部滚动时屏蔽全局滚动事件(屏蔽鼠标滚轮事件)》二维码
  • 微信打赏
  • 支付宝打赏