在平時開發中,經常會遇到這樣一種問題:當打開一個彈窗時,后面的頁面是可以滾動的,演示如下
圖片
那么,該如何鎖定頁面的滾動呢?
傳統的方式其實也不復雜,就是在打開彈窗時阻止滾動就行了,通常是改變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偽類,一切就好辦了,無需過多的判斷,直接一個選擇器搞定
body:has(dialog[open]){ overflow: hidden}
這行選擇器表示,只要有屬性為open的彈窗,body就自動鎖定,無論有多少層彈窗
圖片
是不是非常簡單?
完整代碼可以查看:CSS has lock scroll (juejin.cn)[1]
提一下兼容性,目前現代瀏覽器都支持了,如下
圖片
[1]CSS has lock scroll (juejin.cn): https://code.juejin.cn/pen/7357637625827573800
本文鏈接:http://www.tebozhan.com/showinfo-26-83625-0.html借助CSS has實現打開彈窗時自動鎖定滾動
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 輕松打造Windows服務:將.NET Core項目轉化為無縫運行的后臺服務
下一篇: Go 如何緩解來自軟件依賴的惡意攻擊?