vue--模態框背景不動解決方案
阿新 • • 發佈:2020-07-15
1、如果彈框內容不需要滾動 直接在灰色背景元素上繫結@touchmove.prevent 事件即可
2、內容需要滾動的情況下實現原理:
給一個固定定位的樣式類,當模態框出現時,動態新增樣式類給body 標籤,並且獲取當前頁面滾動高度賦值給
this.mockScrollTop 設定body固定定位的高度。當模態框關閉時body標籤動態移出類名,並把存在data裡的 this.mockScrollTop 值賦值給當前滾動高度
第一步定義需要用到的變數,並且賦予預設值
data(){ return{ mockScrollTop: null, // 距離頂端的值 className:'modalOpen', hideShow:false, // 模態框預設不顯示 } }
第二步methods定義模態框點選事件
// 模態框背景禁止滑動 hideBox() { this.hideShow = !this.hideShow; if (this.hideShow) { this.mockScrollTop = document.scrollingElement.scrollTop; document.body.classList.add(this.className); document.body.style.top= `-${this.mockScrollTop}px`; } else { document.body.classList.remove(this.className); document.scrollingElement.scrollTop = this.mockScrollTop; } },
第三步methods定義模態框出現css 樣式
/*彈層*/ body.modalOpen { -webkit-overflow-scrolling:touch; position: fixed; width: 100%; }
以上就可以實現模態框出現時背景不動。