标题有点复杂,但这实际上是一个非常简单的问题. 很应该遇到过. 最近,对自动完成插件进行了优化,发现当下拉框中有很多内容时,滚动条就会出现. 如果页面本身具有滚动条,则很容易在两侧滚动,并且体验非常差. 因为我以前从未考虑过此类问题,所以我有信心地进行了思考,应通过技术手段避免这种情况.
我一开始就考虑过听滚动事件,但是发现这个想法本身有一个误解,因为滚动元素本身并阻止窗口滚动是没有意义的,这是另一种思考方式,由于滚动通常是鼠标操作,所以为什么不处理滚轮事件呢?
一个简单的检查,确实有类似的文章. 众所周知,默认情况下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;
};
}
};
在网页进行本地滚动时阻止全局滚动事件(阻止鼠标滚轮事件)
本文来自电脑杂谈,转载请注明本文网址:
http://www.pc-fly.com/a/bofangqi/article-298030-1.html