zoukankan      html  css  js  c++  java
  • 阻止网页内部滚动条mousewheel事件冒泡

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

    通过调用以下函数实现:

    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;
                    };
                }
            })
        }
    });
  • 相关阅读:
    10/11
    el表达式的坑
    在idea下两个项目之间的maven父子级项目依赖
    树上任意两点间距离
    优先级顺序
    HDU 6447
    KMP
    cf 1029 C
    牛客练习赛25
    莫比乌斯算法
  • 原文地址:https://www.cnblogs.com/GoCircle/p/8393913.html
Copyright © 2011-2022 走看看