css案例 - mask遮罩層的華麗寫法

mask遮罩蒙層使用通常的寫法的bug

通常寫法pug

.mask

通常寫法css

.mask{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/*移動端*/
background: rgba(0,0,0,.5);
/*ie*/
background: #000;
opacity: 0.5;
filter: alpha(opacity = 0.5);
}

　　

但是這種適用於內容小於屏幕高度的，如果內容撐出屏幕，那么css自動計算的mask的高度就有問題了，
比如這樣，
正面看很ok
但是輕輕上滑。。
嘚！露怯了！

 

起初想的解決是，mask出現的時候不讓頁面滾動？
倒也不是不可以，但是萬一人家剛好移動了一點點再點擊調出蒙層呢？不也還是露怯么！屬於治標不治本型的。

那就只能從高度上下手了
剛好頁面中有計算可視化高度的，
我給mask設置style的行內高度為可視區域高度，發現也不行

那設置成body的scrollHeight呢？也不行
不知道是不是css是rem而我設置px的原因

反正都沒解決

但是js動態設置高度后，我無意識的將position:absolute;改成了position:fixed;
媽耶效果好了！

起初還以為是js起作用了，還想小小開心慶祝下我的機智
后來轉念一想，高度設置了下邊也是露一塊啊，為什么蒙層卻完美貼合了呢？!
所以肯定另有玄機
我就把js刪掉，發現果真對人家沒什么影響，還是那么完美的貼合。
剛就改了兩個地方，於是，我把目光瞄准了css

尼瑪，原來就是fixed和absolute的區別啊！
好了，問題這次真的解決了，測試了很多不同分辨率都OK

.mask{
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
background: rgba(0,0,0,.5);
}