分享一個 CSS 小技巧

在平時開發中，經常會遇到這樣一種問題：當打開一個彈窗時，后面的頁面是可以滾動的，演示如下

圖片

那么，該如何鎖定頁面的滾動呢？

一、傳統的實現方式

傳統的方式其實也不復雜，就是在打開彈窗時阻止滾動就行了，通常是改變overflow屬性

const openModal = () => {
  document.body.style.overflow = 'hidden'
}

const closeModal = () => {
  document.body.style.overflow = 'auto'
}

如果是在現代框架里，比如vue，可以用監聽彈窗狀態來實現

watch(
  () => show.value,
  (val) => {
    if (val) {
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = 'auto'
    }
  },
)

這樣就能鎖定滾動了

圖片

二、傳統方式的局限

雖然上面的實現看似完美，其實還有潛在問題的。比如有多個彈窗，彈窗覆蓋的情況下，這個時候鎖定就會出問題了。

圖片

因為在關閉第二個彈窗的時候，頁面已經解除鎖定了，所以在第一個彈窗還在的時候，頁面已經可以滾動了

如果想要優化這個問題，還需要做進一步的判斷

三、借助 CSS has 實現

現在有了CSS :has偽類，一切就好辦了，無需過多的判斷，直接一個選擇器搞定

body:has(dialog[open]){
  overflow: hidden
}

這行選擇器表示，只要有屬性為open的彈窗，body就自動鎖定，無論有多少層彈窗

圖片

是不是非常簡單？

完整代碼可以查看：CSS has lock scroll (juejin.cn)[1]

四、has已經全兼容了

提一下兼容性，目前現代瀏覽器都支持了，如下

圖片

[1]CSS has lock scroll (juejin.cn)： https://code.juejin.cn/pen/7357637625827573800