蒙層禁止頁面滾動的方案 彈窗是一種常見的交互方式,而蒙層是彈窗必不可少的元素,用於隔斷頁面與彈窗區塊,暫時阻斷頁面的交互。但是在蒙層出現的時候滾動頁面,如果不加處理,蒙層底部的頁面會開始滾動,實際上我們是不希望他進行滾動的,因此需要阻止這種行為。當彈出蒙層時禁止蒙層下的頁面滾動,也可以稱為滾動 ...
此需求有兩種方法,第一種,這種方法適用於,底層和彈窗是兩個平行的沒有關系的兩部分。重疊 https: blog.csdn.net yuhk article details .weui mask .on touchstart ,function ev var e ev window.event e.stopPropagation e.preventDefault alert e ,false 第二 ...
2018-11-24 14:58 0 3973 推薦指數:
蒙層禁止頁面滾動的方案 彈窗是一種常見的交互方式,而蒙層是彈窗必不可少的元素,用於隔斷頁面與彈窗區塊,暫時阻斷頁面的交互。但是在蒙層出現的時候滾動頁面,如果不加處理,蒙層底部的頁面會開始滾動,實際上我們是不希望他進行滾動的,因此需要阻止這種行為。當彈出蒙層時禁止蒙層下的頁面滾動,也可以稱為滾動 ...
場景概述 彈窗是一種常見的交互方式,而蒙層是彈窗必不可少的元素,用於隔斷頁面與彈窗區塊,暫時阻斷頁面的交互。但是,在蒙層元素中滑動的時候,滑到內容的盡頭時,再繼續滑動,蒙層底部的頁面會開始滾動,顯然這不是我們想要的效果,因此需要阻止這種行為。 那么,如何阻止呢?請看以下分析: 方案分析 ...
1、css 樣式: .mask{ background: rgba(59, 59, 59, 0.9); /* opacity: 0.9; */ position: fi ...
創建組件時禁止頁面滾動: 組件銷毀時解除禁止: bodyScroll方法: ...
場景概述 彈窗是一種常見的交互方式,而蒙層是彈窗必不可少的元素,用於隔斷頁面與彈窗區塊,暫時阻斷頁面的交互。但是,在蒙層元素中滑動的時候,滑到內容的盡頭時,再繼續滑動,蒙層底部的頁面會開始滾動,顯然這不是我們想要的效果,因此需要阻止這種行為。 那么,如何阻止呢?請看以下分析: 方案分析 ...
原因:底層視圖高度超出百分百,加入彈窗后再蘋果瀏覽器隱藏上下欄的情況下遮罩層沒有完全遮住底層。 處理:打開彈窗后禁止底層滾動調用stop事件,關閉則開啟底層滾動調用move事件。 let mo=function(e){e.preventDefault();}; stop ...
...
需求:彈出層時禁止頁面滾動 解決: 監聽事件 ...