在我們前端開(kāi)發(fā)過(guò)程中，有時(shí)可能會(huì)需要添加遮蓋層彈窗，如：彈窗登錄、搜索、詳情圖片、內(nèi)容詳情等功能，這時(shí)遮蓋彈窗我們可以使用position: fixed;的方式來(lái)實(shí)現(xiàn)遮蓋層效果。css設(shè)置方法如下：
這樣遮蓋層效果就實(shí)現(xiàn)了，但有時(shí)候我們會(huì)遇到一些特殊情況，比如彈窗中的內(nèi)容信息很多，彈窗高度很高超出其底部body的高度，這樣就會(huì)出現(xiàn)底部超出留白的情況，我們應(yīng)該怎樣處理呢？我在遇到這個(gè)問(wèn)題時(shí)，尋找了許多方法，但是基本上都是華而不實(shí)，最后的解決方法卻是樸實(shí)無(wú)華。
實(shí)現(xiàn)思路：出現(xiàn)這種情況后，我們需要思考其最本質(zhì)的問(wèn)題是什么，這樣我們從最本質(zhì)的問(wèn)題出發(fā)就找到了最簡(jiǎn)單的實(shí)現(xiàn)方法。像遮蓋層彈窗超出時(shí)，我想到的是：
1.怎樣能夠讓遮蓋層不影響到其底部body
2.鼠標(biāo)滾動(dòng)是其底部頁(yè)面滾動(dòng)，怎樣取消其滾動(dòng)效果
3.怎樣讓遮蓋層滾動(dòng)
4.最后發(fā)現(xiàn)要實(shí)現(xiàn)的就是：取消body滾動(dòng)條、遮蓋層添加滾動(dòng)條
關(guān)鍵詞:
