移動端彈窗禁止頁面滾動

我們要阻止頁面滾動,那麼何不將其固定在視窗(即position: fixed),這樣它就無法滾動了,當蒙層關閉時再釋放。
position: fixed應該不用對大家過多介紹了吧,
當然還有一些細節要考慮,將頁面固定視窗後,內容會回頭最頂端,這裏我們需要記錄一下,同步top值。

let bodyEl = document.body
let laytop = 0
function stopBodyScroll (isFixed) {
     if (isFixed) {
         laytop = window.scrollY

         bodyEl.style.position = 'fixed'
         bodyEl.style.top = -laytop + 'px'
     } else {
         bodyEl.style.position = '';
         bodyEl.style.top = '';
         window.scrollTo(0, laytop ); // 回到原先的top
     }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章