溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了vue移動端彈起蒙層滑動禁止底部滑動的實現方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
解決辦法
在蒙層彈起的時候將body設置為fixed定位
在蒙層消失的時候將body恢復原位
popupVisible(newValue) {
if (newValue) {
document.body.style.position = 'fixed';
document.body.style.width = '100%';
document.body.style.height = '100%';
}
else {
document.body.style.position = 'static';
document.body.style.height = 'auto';
}
},設置為fixed的時候整個頁面會恢復原位，如果需要把位置開始scrollY記下來，恢復的時候在滾到原來的位置
popupVisible(newValue) {
if (newValue) {
document.body.style.position = 'fixed';
document.body.style.width = '100%';
document.body.style.height = '100%';
this.top = window.scrollY;
}
else {
document.body.style.position = 'static';
document.body.style.height = 'auto';
window.scrollTo(0, this.top);
}
}補充知識：解決使用vue時頁面內有彈窗時禁止頁面滾動 以及頁面內彈窗因絕對定位導致頁面壓縮的問題
如下所示：
@touchmove.prevent
當頁面彈窗出現時設置 @touchmove.prevent = "false";
2.頁面內彈窗因絕對定位導致頁面壓縮的問題 造成底部導航欄固定在輸入鍵盤上面的問題
// 動態設置背景圖的高度為瀏覽器可視區域高度
// 首先在Virtual DOM渲染數據時，設置下背景圖的高度．
this.bodyHeight = `${document.documentElement.clientHeight}`;
// 然后監聽window的resize事件．在瀏覽器窗口變化時再設置下背景圖高度．
window.onresize = function temp() {
var bodyHeight = `${document.documentElement.clientHeight}`;
that.bodyHeight = bodyHeight;
};通過判斷 bodyHeight 數值的變化，來控制底部導航欄的出現與隱藏
看完上述內容，是不是對vue移動端彈起蒙層滑動禁止底部滑動的實現方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
