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

摘要:
使用鼠标滚轮触发网页内非元素滚动条的滚动事件。当滚动条到达元素的顶部或底部时,它不会触发浏览器窗口的滚动事件。它通过调用以下函数实现:functionpreventScroll(id){var_this=document.getElementById(id);if(navigator.userAgent.indexOf(“Firefox”)>0){_this.addEventListener('DOM

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

通过调用以下函数实现:

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事件冒泡》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇python xlrd,xlwt 读写excel文件Maven知识整理下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)

超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <template> <div> <!-- 内容区域 --> <div class="content">...

自定义滚动条样式(jQuery插件、Webkit、IE)

-------------jQuery滚动条插件------------- http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html http://www.jsfoot.com/shouye/ue-design/ http://blog.sina.com.cn/s/blog_4abb9bba0101b...

JQuery iframe宽高度自适应浏览器窗口大小的解决方法

iframe宽高度自适应浏览器窗口大小的解决方法   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js   Bootstrap-3.3.7-dis...

jquery滚动条加载数据

//滚动条 $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); var data = $("#n").text();...

微信小程序-自定义下拉刷新

要实现微信小程序上拉刷新与下拉加载更多 微信给出的接口不怎么友好,最终想实现效果类似QQ手机版 ,一共3种下拉刷新状态变化,文字+图片+背景颜色 最终实现后的效果(这里提示有个不同点就是,自定义了导航条,并且下拉的时候,自定义导航条必须固定) 小程序实现下拉加载2种方式: 1. 简单粗暴,直接开启enablePullDownRefresh,开启全局下...

CSS 控制滚动条样式

在360浏览器中设置滚动条隐藏样式 以下 可直接实现隐藏功能 1 ::-webkit-scrollbar {/*隐藏滚轮*/ 2   display:none; 3 } 如果要兼容 PC 其他浏览器(Firefox 、IE6、IE8、Google等)设置滚动条隐藏样式,在容器(div)外面再嵌套一层overflow:hidden内部边框宽高限制尺寸和外...