禁止頁面Body在後臺滾動

鐵錨發表於2016-06-17

我最討厭的一種情況, 是在滾動彈出框的時候, 後臺的 <body> 也跟著一起滾了。你可能也碰到過這種情況: 想滾動一下對話方塊, 卻看到底層的頁面也跟著一起滾動? 這真是種糟糕的使用者體驗, 很杯具、呵呵。

那麼怎樣才算是比較好的處理方式? 監聽 scroll 事件並且執行 preventDefault 和/或 stopPropagation, 但卻沒什麼用。 最簡單的方式是使用CSS:

/* ...或者其他類名,如: body.dialogShowing */
body.noScroll,html.noScroll { 
    overflow: hidden;
    height:100%;
}

感謝 “陳奇” 評論提供的修正

要給body和html同時設定overflow：hidden，並且height：100%才會相容到大部分的安卓機。

對整個 <body> 禁止溢位, 可以保證只有獲取焦點的元素會滾動, 其他的元素不會連帶著滾動。這是一種簡單卻實用的方法, 當然,你需要JS程式碼來配合,動態的增加/移除body元素上相應的CSS類。

這確實是個挺好的方式,建議將程式碼收藏備用!

本文最先釋出於: http://zcfy.cc/article/334

原文連結: https://davidwalsh.name/prevent-body-scrolling

翻譯日期: 2016年5月26日


相關文章