AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當(dāng)前位置:首頁 > 科技  > 軟件

借助CSS has實(shí)現(xiàn)打開彈窗時(shí)自動鎖定滾動

來源: 責(zé)編: 時(shí)間:2024-04-15 18:14:01 153觀看
導(dǎo)讀分享一個(gè) CSS 小技巧在平時(shí)開發(fā)中,經(jīng)常會遇到這樣一種問題:當(dāng)打開一個(gè)彈窗時(shí),后面的頁面是可以滾動的,演示如下圖片那么,該如何鎖定頁面的滾動呢?一、傳統(tǒng)的實(shí)現(xiàn)方式傳統(tǒng)的方式其實(shí)也不復(fù)雜,就是在打開彈窗時(shí)阻止?jié)L動就行了,

m6L28資訊網(wǎng)——每日最新資訊28at.com

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

在平時(shí)開發(fā)中,經(jīng)常會遇到這樣一種問題:當(dāng)打開一個(gè)彈窗時(shí),后面的頁面是可以滾動的,演示如下m6L28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片m6L28資訊網(wǎng)——每日最新資訊28at.com

那么,該如何鎖定頁面的滾動呢?m6L28資訊網(wǎng)——每日最新資訊28at.com

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

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

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

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

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

這樣就能鎖定滾動了m6L28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片m6L28資訊網(wǎng)——每日最新資訊28at.com

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

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

圖片圖片m6L28資訊網(wǎng)——每日最新資訊28at.com

因?yàn)樵陉P(guān)閉第二個(gè)彈窗的時(shí)候,頁面已經(jīng)解除鎖定了,所以在第一個(gè)彈窗還在的時(shí)候,頁面已經(jīng)可以滾動了m6L28資訊網(wǎng)——每日最新資訊28at.com

如果想要優(yōu)化這個(gè)問題,還需要做進(jìn)一步的判斷m6L28資訊網(wǎng)——每日最新資訊28at.com

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

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

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

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

圖片圖片m6L28資訊網(wǎng)——每日最新資訊28at.com

是不是非常簡單?m6L28資訊網(wǎng)——每日最新資訊28at.com

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

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

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

圖片圖片m6L28資訊網(wǎng)——每日最新資訊28at.com

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

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

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

上一篇: 輕松打造Windows服務(wù):將.NET Core項(xiàng)目轉(zhuǎn)化為無縫運(yùn)行的后臺服務(wù)

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

標(biāo)簽:
  • 熱門焦點(diǎn)
Top