使用標桿思想，進行判定操作let flag = false; //全域性變數，判定蒙層是否開啟
開啟：true 關閉：false
蒙層button
>
"mask"
>
div>
body
>
html
>
let btn = document.queryselector
("#btn");
let dom = document.
queryselector
("#mask");
//設定全域性開關，用來判斷蒙層是否開啟
let flag =
false
; btn.
onclick
=function()
//動態獲取當前視窗的寬高，並設定給蒙層
function
handlemask()
px; height:
$px;
background:rgba(0,0,0,0.5);
position: fixed;
left: 0;
top: 0;
display: block;`}
//當頁面視窗大小變化時
window.
onresize
=function()
} dom.
onclick
=function()
蒙層底部不動 z index失效
開啟蒙層時新增 body css 關閉蒙層時新增 body css 監聽滾動條到頁面頂部的距離 scrolltobottom 頁面新增監聽滾動事件 window.addeventlistener scroll this scrolltobottom.bind this 蒙層出現時 body css ...
禁止蒙層底部頁面跟隨滾動
彈窗是一種常見的互動方式，而蒙層是彈窗必不可少的元素，用於隔斷頁面與彈窗區塊，暫時阻斷頁面的互動。但是，在蒙層元素中滑動的時候，滑到內容的盡頭時，再繼續滑動，蒙層底部的頁面會開始滾動，顯然這不是我們想要的效果，因此需要阻止這種行為。那麼，如何阻止呢？請看以下分析 overflow hidden he...
禁止蒙層底部頁面跟隨滾動
彈窗是一種常見的互動方式，而蒙層是彈窗必不可少的元素，用於隔斷頁面與彈窗區塊，暫時阻斷頁面的互動。但是，在蒙層元素中滑動的時候，滑到內容的盡頭時，再繼續滑動，蒙層底部的頁面會開始滾動，顯然這不是我們想要的效果，因此需要阻止這種行為。那麼，如何阻止呢？請看以下分析 overflow hidden he...