1嚎花、背景鎖定與滾動(dòng)條引起的抖動(dòng)問題
彈框的原意就是要聚焦用戶的注意力拥娄,因此我們要做的是 – 背景鎖定(從技術(shù)角度其實(shí)是暫時(shí)性干掉滾動(dòng)條)谈火。
當(dāng)Dialog彈框出現(xiàn)的時(shí)候郊闯,根元素overflow:hidden.
前端實(shí)現(xiàn)原理
此時(shí),由于頁面滾動(dòng)條從有到無贪庙,頁面會(huì)晃動(dòng)蜘犁,這樣糟糕的體驗(yàn)顯然是不能容忍了,于是止邮,對(duì)元素進(jìn)行處理这橙,右側(cè)增加一個(gè)滾動(dòng)條寬度(假設(shè)寬度是widthScrollbar)的透明邊框。
Dialog隱藏的時(shí)候再把滾動(dòng)條放開
2导披、避免彈框上再彈出彈框
要盡量避免在彈框上再彈一層彈框屈扎,2層蒙版會(huì)讓用戶覺得負(fù)擔(dān)很重×秘埃可以改用輕量彈框或重新把交互梳理
3鹰晨、蒙版增強(qiáng)品牌感
不一定是純黑或純白,可以根據(jù)產(chǎn)品主色來搭配萌版止毕。
Tumblr的蒙版顏色採用了它的品牌色rgba(54,70,93,.95)
Twitch的蒙版顏色在黑色中混入了一點(diǎn)紫色rgba(32,28,43,.9)模蜡,與它的品牌色相符