码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-01-31 20:13:07      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:navig   end   网页   func   调用   scroll   pre   dom   mouse   

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

通过调用以下函数实现:

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事件冒泡

标签:navig   end   网页   func   调用   scroll   pre   dom   mouse   

原文地址:https://www.cnblogs.com/GoCircle/p/8393913.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!