前端 移動端彈窗彈出後禁止頁面滾動

在做專案時，我碰到了乙個問題，當浮層彈出後，浮層後面的內容仍可以滾動。

首先我們要明確，當浮層彈出後，我們操作的是body的滾動條，而不是其他div。

body出現滾動條。這種問題是應該避免，我認為合理的頁面布局不應該讓body出現滾動條。應該將內容放在div中，讓div出現滾動條，這樣可以很方便的處理各種問題。

如果你的布局不好改，也是有解決方法的。

首先在公共樣式檔案中新增乙個類名

樣式css：

.body-scrollctrl

watch:

else},
},

個人認為body出現滾動條的布局都是不合理的，我們應該禁止body出現滾動條。

推薦布局—html，如果內容過多，使wrap出現滾動條，而不是body

="wrap"

>
我們應該盡可能的操作wrap，而不是body
<
/div>
<
/body>css：給wrap設定height: 100vh，而不是100%。這是重點！！！設定成100%，出現滾動條仍然是body，而不是wrap。vh是相對viewport的高度，100vh等於100% * viewport的高度。此時wrap出現滾動條，但是浮層彈出後，頁面也滾動不了，因為body沒有滾動條，有滾動條的是wrap

移動端彈窗顯示後，禁止body內容跟隨彈窗滾動

對於一般大小的彈窗可以使用如下方案 1.阻止預設事件 缺點 該方案存在一定的相容性，不是所有瀏覽器都有效。對於彈窗存在滾動的情況，也不適用。優點 彈窗顯示時，頁面仍然固定在原來位置，不會回滾到頂部 阻止彈窗滾動 function stopscroll function recoverscroll f...

移動端禁止手機自帶鍵盤彈出

這個問題，確實困擾了我好久，但是今天解決了。在網上搜尋答案，全都是用div模擬input框實現，沒有乙個真正解決這個問題的，現在我只需要一句 就可以完完整整的解決這個問題。這個是我自製的乙個日曆，在沒有選擇日期前她是這個樣子的，感覺還可以吧 但是好景不長，當我將手放進選擇框選日期的時候，手機自帶的鍵...

移動端禁止頁面拖動 h5禁止拖動頁面

pc上css控制滾動僅css overflow hidden 已足夠。但是，如果在mobile上還是可以拖動的！所以需要監聽touchmove事件。頁面禁止拖動 滾動 html,body css overflow hidden css height 100 document.body.addeven...