web頁面彈出遮罩層,通過js或css禁止蒙層底部頁面跟隨滾動
場景概述 彈窗是一種常見的交互方式，而蒙層是彈窗必不可少的元素，用於隔斷頁面與彈窗區塊，暫時阻斷頁面的交互。但是，在蒙層元素中滑動的時候，滑到內容的盡頭時，再繼續滑動，蒙層底部的頁面會開始滾動，顯然這不是我們想要的效果，因此需要阻止這種行為。 那么，如何阻止呢？請看以下分析： 方案分析 ...
原文：禁止蒙層底部頁面跟隨滾動
場景概述 彈窗是一種常見的交互方式，而蒙層是彈窗必不可少的元素，用於隔斷頁面與彈窗區塊，暫時阻斷頁面的交互。但是，在蒙層元素中滑動的時候，滑到內容的盡頭時，再繼續滑動，蒙層底部的頁面會開始滾動，顯然這不是我們想要的效果，因此需要阻止這種行為。 那么，如何阻止呢 請看以下分析： 方案分析 方案一 打開蒙層時，給body添加樣式： 在某些機型下，你可能還需要給根節點添加樣式： 關閉蒙層時，移除以上樣式 ...
2017-12-08 15:52 0 1034 推薦指數：
相關推薦
蒙層禁止頁面滾動的方案
蒙層禁止頁面滾動的方案 彈窗是一種常見的交互方式，而蒙層是彈窗必不可少的元素，用於隔斷頁面與彈窗區塊，暫時阻斷頁面的交互。但是在蒙層出現的時候滾動頁面，如果不加處理，蒙層底部的頁面會開始滾動，實際上我們是不希望他進行滾動的，因此需要阻止這種行為。當彈出蒙層時禁止蒙層下的頁面滾動，也可以稱為滾動 ...
HTML JS 彈層后底部頁面禁止滾動處理
1.打開新頁面時需要禁止鼠標滾輪，禁止頁面滑動 ...
vue-蒙層彈窗里的內容滾動。外層大頁面禁止滾動
此需求 有兩種方法，第一種，這種方法適用於，底層 和彈窗是兩個平行的沒有關系的兩部分。重疊（https://blog.csdn.net/yuhk231/article/details/74 ...
遮罩層下禁止頁面滾動
// 封裝禁止頁面滾動方法（該方法兼容PC端和移動端）var topSpace = 0function BodyScroll (isState) { var bodyDoc = document.body if (isState) {topSpace = window.scrollYbodyDoc ...
vue彈層時禁止頁面滾動
創建組件時禁止頁面滾動： 組件銷毀時解除禁止： bodyScroll方法： ...
mask 遮罩層彈窗禁止頁面滾動
1、css 樣式： .mask{ background: rgba(59, 59, 59, 0.9); /* opacity: 0.9; */ position: fi ...