国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術文章
文章詳情頁

javascript - 為什么scroll事件阻止不了冒泡?

瀏覽:133日期:2023-02-10 16:38:06

問題描述

需求是當鼠標在頁面某個有滾動條的元素內部觸發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為什么不行呢?為什么阻止不了冒泡呢?現在需求已經完美實現了,只是想更清楚原始事件背后的原理。

問題解答

回答1:

jQuery 插件: http://mohammadyounes.github....

性能問題滾輪滾一格, 只觸發一次滾輪事件scroll 事件是連續觸發的, 自從有了平滑滾動 (事實上 IE6 就已經有了平滑滾動) , 每滾動 1 像素, 都會觸發 scroll 事件

不建議 overflow:hidden 和 overflow:hidden 之間反復切換, 因為會導致 re-layout, 性能問題

原理:scroll 事件既不能 stopPropagation 也不能 preventDefault看上去是阻止了 scroll 事件, 其實是 preventDefault 滾輪/翻頁按鍵 事件

另外, mousewheel 是有兼容性問題的, 所以大家都用 jQuery 了

回答2:

忘了在哪看過相關的文章了Demo拿走

回答3:

教你個偏方,設置個變量 isScrolling = false;

當鼠標 hover 到 目標p時 ,isScrolling = true; 而對于body 當isScrolling = true時,禁止滾動,簡單點就是

document.onmousewheel = function(e){ e = e || event; if(isScrolling){e.preventDefault();return false; }};

而當鼠標移開p時,isScrolling = false.

回答4:

滾動阻止demo

//阻止事件冒泡$.stopEvent = function (e) { if (e && e.stopPropagation) { e.stopPropagation() } else { window.event.cancelBubble = true } };//阻止瀏覽器默認行為$.stopDefault = function (e) { if (e && e.preventDefault) { e.preventDefault() } else { window.event.returnValue = false } };回答5:

好吧,沒人繼續了。

目前能找到的方法就依然是overflowhidden。

至于為什么scroll不能阻止冒泡,這個我在MDN上找到了答案:上面說,scroll只冒泡到document.defaultView,而且不能cancel掉。javascript - 為什么scroll事件阻止不了冒泡?

但是mdn上說mousewheel是可以阻止冒泡的,但是我試了沒成功,希望會用的同學能寫個demo來瞧瞧~

回答6:

試試mousewheel事件

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 日韩 国产 欧美 精品 在线 | 久草在线网址 | 老色99久久九九精品尤物 | 欧美一级特黄做 | 理论片我不卡在线观看 | 国产成人啪一区二区 | 一区二区三区 日韩 | 国产成年网站v片在线观看 国产成人aa在线视频 | 韩国在线精品福利视频在线观看 | 91久久亚洲国产成人精品性色 | 日韩视频在线观看 | 中文字幕无线码中文字幕网站 | 97免费视频在线观看 | 美女被男人桶到嗷嗷叫爽网站 | 久久se精品一区二区国产 | 国产三级精品三级 | 久草在线观看资源 | 国产国产成人精品久久 | 国产成人精品免费视频 | 国产精品日产三级在线观看 | 欧美一区二区三区不卡免费 | 中文字幕日韩精品亚洲七区 | 真实国产精品视频国产网 | 欧美一级毛片免费播放aa | 国产精品国产三级国产普通 | 免费人成黄页网站在线观看 | 中文字幕乱码无线码在线 | 日本一级特黄大一片免 | 免费观看欧美一区二区三区 | 一级毛片 在线播放 | 久久久精品久久视频只有精品 | 日韩精品一区二区三区视频网 | 久草.com| 中文在线三级中文字幕 | 国产高清天干天天视频 | 欧美一级情欲片在线 | 久久久免费精品视频 | 国产在视频线在精品 | 91精品国产色综合久久 | 国产成人免费片在线观看 | 国产成人ay手机在线观看 |