藉助 CSS has 實現打開彈窗時自動鎖定滾動

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

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

一、傳統的實現方式

傳統的方式其實也不復雜，就是在打開彈窗時阻止滾動就行了，通常是改變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_

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/Q_Y0er6MYgn7SjI5e73MEg

猜你喜歡