利用鼠标滚轮对网页内部无素滚动条触发滚动事件,当滚动条到达元素顶部或底部时不触发浏览器窗口的滚动事件。
通过调用以下函数实现:
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即可。
jquery插件:
$.fn.extend({ ???"preventScroll": function () {//阻止滚动 ???????$(this).each(function () { ???????????var _this = this; ???????????if (navigator.userAgent.indexOf(‘Firefox‘) >= 0) { ??//firefox ?????????????????_this.addEventListener(‘DOMMouseScroll‘, function (e) { e.preventDefault(); }, false); ???????????} else { ???????????????_this.onmousewheel = function (e) { ???????????????????return false; ???????????????}; ???????????} ???????}) ???}, ???"areaScroll": 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; ???????????????}; ???????????} ???????}) ???}});
阻止网页内部滚动条mousewheel事件冒泡
原文地址:https://www.cnblogs.com/GoCircle/p/8393913.html