朴人博客

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

一开始想过监听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;
            };
        }
    };