WdC28資訊網——每日最新資訊28at.com

分享一個 CSS 小技巧

在平時開發(fā)中，經常會遇到這樣一種問題：當打開一個彈窗時，后面的頁面是可以滾動的，演示如下WdC28資訊網——每日最新資訊28at.com

圖片WdC28資訊網——每日最新資訊28at.com

那么，該如何鎖定頁面的滾動呢？WdC28資訊網——每日最新資訊28at.com

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

傳統(tǒng)的方式其實也不復雜，就是在打開彈窗時阻止?jié)L動就行了，通常是改變overflow屬性WdC28資訊網——每日最新資訊28at.com

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

如果是在現(xiàn)代框架里，比如vue，可以用監(jiān)聽彈窗狀態(tài)來實現(xiàn)WdC28資訊網——每日最新資訊28at.com

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

這樣就能鎖定滾動了WdC28資訊網——每日最新資訊28at.com

圖片WdC28資訊網——每日最新資訊28at.com

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

雖然上面的實現(xiàn)看似完美，其實還有潛在問題的。比如有多個彈窗，彈窗覆蓋的情況下，這個時候鎖定就會出問題了。WdC28資訊網——每日最新資訊28at.com

圖片WdC28資訊網——每日最新資訊28at.com

因為在關閉第二個彈窗的時候，頁面已經解除鎖定了，所以在第一個彈窗還在的時候，頁面已經可以滾動了WdC28資訊網——每日最新資訊28at.com

如果想要優(yōu)化這個問題，還需要做進一步的判斷WdC28資訊網——每日最新資訊28at.com

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

現(xiàn)在有了CSS :has偽類，一切就好辦了，無需過多的判斷，直接一個選擇器搞定WdC28資訊網——每日最新資訊28at.com

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

這行選擇器表示，只要有屬性為open的彈窗，body就自動鎖定，無論有多少層彈窗WdC28資訊網——每日最新資訊28at.com

圖片WdC28資訊網——每日最新資訊28at.com

是不是非常簡單？WdC28資訊網——每日最新資訊28at.com

完整代碼可以查看：CSS has lock scroll (juejin.cn)[1]WdC28資訊網——每日最新資訊28at.com

四、has已經全兼容了

提一下兼容性，目前現(xiàn)代瀏覽器都支持了，如下WdC28資訊網——每日最新資訊28at.com

圖片WdC28資訊網——每日最新資訊28at.com

[1]CSS has lock scroll (juejin.cn)： https://code.juejin.cn/pen/7357637625827573800WdC28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-83625-0.html借助CSS has實現(xiàn)打開彈窗時自動鎖定滾動

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 輕松打造Windows服務：將.NET Core項目轉化為無縫運行的后臺服務

下一篇： Go 如何緩解來自軟件依賴的惡意攻擊？