在移动端使用弹出层时,背景会进行滚动,我们可以进行背景固定来阻止背景滚动如下:
我们先拿到当前页面滚动距离:
afterOpen() {
//先把body设置为position:fixed;然后将当前页面滚动距离设置为body的top属性,背景就不可滚动了
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + "px";
},
/**
* 弹窗关闭取消背景固定,恢复背景滑动
*/
beforeClose() {
//在弹出层消失后,移除body的class 目的是移除定位,position:fixed;然后将当前页面滚动距离设置为开始的时候的页面滚动距离,阻止背景滚动即可完成。
document.body.classList.remove(bodyCls);
document.scrollingElement.scrollTop = scrollTop;
},