国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - 為什麼scroll事件阻止不了冒泡?
PHP中文網
PHP中文網 2017-07-05 11:07:59
0
6
4451

需求是當滑鼠在頁面某個有捲軸的元素內部觸發(fā)scroll事件,阻止body的scroll一同觸發(fā)。

說白了就是:滑鼠在p裡滾時,即使p滾到頭了,body也不滾動。


我給了p一個scroll事件,裡面阻止冒泡。想透過這個思路禁止body的scroll,但並沒有什麼用。
那麼問題來了:
1.怎麼實現(xiàn)這個需求?
2.為什麼scroll阻止不了冒泡?
3.關於給body overflow:hidden這個方法,已經曉得了。若是用這種方法,麻煩點在於要判斷滑鼠的位置是否在p內,有很多相容性問題,而且貌似必須透過實踐觸發(fā)位置取得(例如mousemove),關於這種解法,不知道有沒有比較便捷的寫法或一些完善?


5月27日

感謝大家?guī)淼膁emo! ! !
我看網路上的方法也是用scrollTop,但一直沒找到比較實用的,都寫的很複雜。
感謝 cc_christian 提供這個非常清晰實用的版本~
當然,浴巾 給的jq插件效果更強大,可以說是完美~

看來這個scroll問題相容性確實不怎麼好,兩個好用的方法全是jq啊。
而且我發(fā)現(xiàn)個問題,其實之前在網路上有找到過不少scrollTop的思路,但是還是很疑惑,為什麼本身的事件阻止不了?尤其是mousewheel,scroll在MDN上確實說了,不能cancel冒泡,但是mousewheel說是可以啊,但是實際用了還是不行。
唯一的方法就是儲存滾動位置,在hover上去滾動起來的時候給scrollTop賦值。
估計 浴巾 的插件內部也是這樣的原理(沒有實際去看,怕是水平不行一時沒法都看懂)
但是mousewheel為什麼不行呢?為什麼阻止不了冒泡呢?現(xiàn)在需求已經完美實現(xiàn)了,只是想更清楚原始事件背後的原理。

PHP中文網
PHP中文網

認證高級PHP講師

全部回覆(6)
給我你的懷抱
  1. jQuery 外掛: http://mohammadyounes.github....

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

  3. 不建議 overflow:hiddenoverflow:hidden 之間反覆切換, 因為會導致 re-layout, 效能問題


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

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

我想大聲告訴你

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

小葫蘆

教你個偏方,設定個變數 isScrolling = false;

當滑鼠 hover 到 目標p時 ,isScrolling = true; 而對於body 當isScrolling = true時,禁止?jié)L動,簡單點就是

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

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

扔個三星炸死你

滾動阻止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 } };
學霸

好吧,沒人繼續(xù)了。

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

至於為什麼scroll不能阻止冒泡,這個我在MDN上找到了答案:上面說,scroll只冒泡到document.defaultView,而且不能cancel掉。

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

世界只因有你

試試mousewheel事件

最新下載
更多>
網站特效
網站源碼
網站素材
前端模板