分享一個(gè) CSS 小技巧

在平時(shí)開發(fā)中，經(jīng)常會(huì)遇到這樣一種問(wèn)題：當(dāng)打開一個(gè)彈窗時(shí)，后面的頁(yè)面是可以滾動(dòng)的，演示如下

圖片

那么，該如何鎖定頁(yè)面的滾動(dòng)呢？

一、傳統(tǒng)的實(shí)現(xiàn)方式

傳統(tǒng)的方式其實(shí)也不復(fù)雜，就是在打開彈窗時(shí)阻止?jié)L動(dòng)就行了，通常是改變overflow屬性

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

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

如果是在現(xiàn)代框架里，比如vue，可以用監(jiān)聽彈窗狀態(tài)來(lái)實(shí)現(xiàn)

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

這樣就能鎖定滾動(dòng)了

圖片

二、傳統(tǒng)方式的局限

雖然上面的實(shí)現(xiàn)看似完美，其實(shí)還有潛在問(wèn)題的。比如有多個(gè)彈窗，彈窗覆蓋的情況下，這個(gè)時(shí)候鎖定就會(huì)出問(wèn)題了。

圖片

因?yàn)樵陉P(guān)閉第二個(gè)彈窗的時(shí)候，頁(yè)面已經(jīng)解除鎖定了，所以在第一個(gè)彈窗還在的時(shí)候，頁(yè)面已經(jīng)可以滾動(dòng)了

如果想要優(yōu)化這個(gè)問(wèn)題，還需要做進(jìn)一步的判斷

三、借助 CSS has 實(shí)現(xiàn)

現(xiàn)在有了CSS :has偽類，一切就好辦了，無(wú)需過(guò)多的判斷，直接一個(gè)選擇器搞定

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

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

圖片

是不是非常簡(jiǎn)單？

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

四、has已經(jīng)全兼容了

提一下兼容性，目前現(xiàn)代瀏覽器都支持了，如下

圖片

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