h5,微信小程序弹出层底部禁止滑动

1.如果弹窗内容不可滑动，仅展示

方案一：只需要给弹窗蒙层加上 @touchmove.prevent 即可实现，无兼容性问题

方案二：在弹窗蒙层加上touch-action:none;

方案三：打开弹窗时，设置body的overflow属性为hidden并阻止默认事件

document.body.style.overflow = 'hidden';

var fn = function(e){e.preventDefault();};

document.addEventListener("touchmove",fn,false);

关闭弹窗时设置body的overflow属性为""并移除阻止默认事件

document.body.style.overflow ='';

var fn = function(e){e.preventDefault();};

document.removeEventListener("touchmove",fn,false);

2.如果弹窗内容也可以滑动

方案：设置一个top为0

打开弹窗时，记录top等于当时scrollY的高度,并设置body定位为fixed

document.body.style.overflow = 'hidden';

top = window.scrollY;

document.body.style.position = 'fixed';

document.body.style.top = -top + 'px';

关闭弹窗时

document.body.style.overflow ='';

document.body.style.position = '';

document.body.style.top = '';

window.scrollTo(0,top);