阻止网页内部滚动条mousewheel事件冒泡

最新推荐文章于 2022-11-29 10:45:24 发布

jyy_12

最新推荐文章于 2022-11-29 10:45:24 发布

阅读量1.3w

点赞数 1

分类专栏： Javascript 文章标签： function firefox 浏览器

本文链接：https://blog.csdn.net/jyy_12/article/details/6878049

版权

Javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

利用鼠标滚轮对网页内部无素滚动条触发滚动事件，当滚动条到达元素顶部或底部时不触发浏览器窗口的滚动事件。

通过调用以下函数实现：

function preventScroll(id){
	var _this = document.getElementById(id);
	if(navigator.userAgent.indexOf("Firefox")>0){
		_this.addEventListener('DOMMouseScroll',function(e){
			_this.scrollTop += e.detail > 0 ? 60 : -60;   
			e.preventDefault();
		},false); 
	}else{
		_this.onmousewheel = function(e){   
			e = e || window.event;   
			_this.scrollTop += e.wheelDelta > 0 ? -60 : 60;   
			return false;
		};
	}
	return this;
}

参考资料： http://www.cnblogs.com/weekend001/archive/2011/05/11/2043474.html

IE9不支持类似 e.returnValue = false 这种写法，相应的地方改成return false即可。

demo下载：http://download.csdn.net/detail/jyy_12/3688776

jquery插件：

$.fn.extend({
	"preventScroll":function(){
		$(this).each(function(){
			var _this = this;
			if(navigator.userAgent.indexOf('Firefox') >= 0){   //firefox
				_this.addEventListener('DOMMouseScroll',function(e){
					_this.scrollTop += e.detail > 0 ? 60 : -60;   
					e.preventDefault();
				},false); 
			}else{
				_this.onmousewheel = function(e){   
					e = e || window.event;   
					_this.scrollTop += e.wheelDelta > 0 ? -60 : 60;   
					return false;
				};
			}
		})	
	}
});
$(".box").preventScroll();