在彈出視窗時隱藏背景滾軸

發表於 2020-02-27 更新於 2023-05-10 分類於前端開發 Disqus：

先前專案在開發移動版時，本來是用推移的方式展開 navbar 選單，後來客戶希望用覆蓋全畫面的方式來打開選單。

本來想說要不要用 Bootstrap 提供的現有工具解決。移動版 navbar 點擊後跳出的覆蓋視窗，其實概念類似於 BS 提供的 modal，即強制彈出一個新畫面，脫離原先瀏覽網頁內容的情境。

最後我還是想嘗試用 CSS 土法煉鋼的方式，將 pop window 展開到全畫面以達成需求。

結果出現了一個問題：pop window 覆蓋全畫面時，右邊滾軸竟然還在，而且可以被滾動

彈出覆蓋畫面時隱藏背景捲軸

後來發現解法滿簡單的。就是在 pop window 出來時，將 body 加上 overflow: hidden，把整個畫面的滾軸拿掉，這樣就會符合需求了。