登录  /  注册
javascript - 为什么scroll事件阻止不了冒泡?
PHP中文网
PHP中文网 2017-07-05 11:07:59
[JavaScript讨论组]

需求是当鼠标在页面某个有滚动条的元素内部触发scroll事件,阻止body的scroll一同触发。

说白了就是:鼠标在p里滚时,即使p滚到头了,body也不滚动。


我给了p一个scroll事件,里面阻止冒泡。想通过这个思路禁止body的scroll,但是并没有什么用。
那么问题来了:
1.怎样实现这个需求?
2.为什么scroll阻止不了冒泡?
3.关于给body overflow:hidden这个方法,已经晓得了。若是用这种方法,麻烦点在于要判断鼠标的位置是否在p内,有很多兼容性问题,而且貌似必须通过实践触发位置获取(比如mousemove),关于这种解法,不知道有没有比较便捷的写法或者一些完善?


5月27日

感谢大家带来的demo!!!
我看网上的办法也是用scrollTop,但是一直没找到比较实用的,都写的很复杂。
感谢 cc_christian 提供这个非常清晰实用的版本~
当然, 浴巾 给的jq插件效果更强大,可以说是完美~

看来这个scroll问题兼容性确实不怎么好,两个好用的方法全是jq啊。
而且我发现个问题,其实之前在网上有找到过不少scrollTop的思路,但是还是很疑惑,为什么本身的事件阻止不了?尤其是mousewheel,scroll在MDN上确实说了,不能cancel冒泡,但是mousewheel说是可以啊,但是实际用了还是不行。
唯一的方法就是存储滚动位置,在hover上去滚动起来的时候给scrollTop赋值。
估计 浴巾 的插件内部也是这样的原理(没有实际去看,怕是水平不行一时没法都看懂)
但是mousewheel为什么不行呢?为什么阻止不了冒泡呢?现在需求已经完美实现了,只是想更清楚原始事件背后的原理。

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(6)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号