利用鼠标滚轮对网页内部无素滚动条触发滚动事件,当滚动条到达元素顶部或底部时不触发浏览器窗口的滚动事件。
通过调用以下函数实现:
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; }; } }) } });