我最討厭的一種情況, 是在滾動彈出框的時候, 後台的也跟著一起滾了。你可能也碰到過這種情況: 想滾動一下對話方塊, 卻看到底層的頁面也跟著一起滾動? 這真是種糟糕的使用者體驗, 很杯具、呵呵。
那麼怎樣才算是比較好的處理方式? 監聽scroll事件並且執行preventdefault和/或stoppropagation, 但卻沒什麼用。 最簡單的方式是使用css:
/* ...或者其他類名,如: body.dialogshowing */
body.noscroll,html.noscroll
對整個禁止溢位, 可以保證只有獲取焦點的元素會滾動, 其他的元素不會連帶著滾動。這是一種簡單卻實用的方法, 當然,你需要js**來配合,動態的增加/移除body元素上相應的css類。
這確實是個挺好的方式,建議將**收藏備用!
本文最先發布於:
翻譯日期: 2023年5月26日
移動端彈出層滾動時禁止body滾動
相信很多寫移動端的朋友會遇到這個問題，我也遇到了，之後就辛辛苦苦的在網上找解決辦法，下面我大概提一下我在網上看到的幾種辦法，行不行的通呢？本人就親測了下。本人學的還不是太深，如果有什麼不對的地方或者有好的解決辦法，也請告知。測試結果 chrome手機模擬器還真可以，but到了我的安卓手機上，撲街了 ...
uni app 如何禁止頁面滾動
在需要在禁止頁面滾動的標籤上加上catchtouchmove true 例子 zhemu catchtouchmove true view gun 滾動區域 view view template export default methods script zhemu gun style 博主標籤的樣...
js禁止蘋果頁面底部滾動 js 禁止 允許頁面滾動
出處 方法一 ios允許滾動會無效 function scrcontrol t passive 引數不能省略，用來相容ios和android else if t 1 passive，設定該屬性的目的主要是為了在阻止事件預設行為導致的卡頓。等待 的執行是耗時的，有些甚至耗時很明顯，這樣就會導致頁面卡頓...