1. 通過js控制
方法一：----有兼容性問題,蘋果和安卓低版本滑動時屏幕上下部分會閃動
打開遮罩層時：
document.documentElement.style.overflowY = 'hidden'; //禁止底層div滾動
關閉遮罩層時：
document.documentElement.style.overflowY = 'auto'; //取消禁止屏幕滾動
方法二：----有兼容性問題,蘋果和安卓低版本滑動時屏幕上下部分會閃動
在打開遮罩層時：
document.body.style.overflow = 'hidden'
在關閉遮罩層時：
document.body.style.overflow = 'scroll'
2. 在vue中
如果不要求遮罩層滾動，那么就直接給遮罩層最外層元素添加：
@touchmove.prevent
3. 通過css控制
存在問題：當打開遮罩層時頁面會回滾到最頂部
在打開遮罩層時：
document.body.style.overflow = 'hidden'
document.body.style.width = '100%'
document.body.style.height = '100%'
document.body.style.position = 'fixed'
在關閉遮罩層時：
document.body.style.overflow = 'scroll'
document.body.style.width = '100%'
document.body.style.height = '100%'
document.body.style.position = 'relative'
4. 最佳解決方式
在打開遮罩層時：
document.body.style.position = 'fixed'
document.body.style.overflow = 'hidden'
注意：當打開遮罩層時，底部的頁面會返回最頂部
在關閉遮罩層時：
document.body.style.overflow = 'scroll'
document.body.style.position = 'relative'
window.scrollTo({ top : 10000}) //我這邊默認將頁面滾動到最底部
當關閉遮罩層時將頁面滾動到底部，如果有要求頁面停到某個位置的，就需要在打開遮罩層定位之前就將主頁面當前位置向上滾動的距離保存到變量scrollTop中，在關閉遮罩層后將當前頁面的window.scrollTo({ top : scrollTop})