分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

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

发布时间:2023-09-06 01:40责任编辑:赖小花关键词:冒泡

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

通过调用以下函数实现:

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved