背景:移动端开发有弹出框时,下面页面还是可以滚动,本身也不是问题,但是有时候需要弹框出现,底部禁止滚动,如果需要,以下代码可以帮你实现效果:
// 在需要弹窗的代码里 调用stopBodyScroll ("true");
// 在关闭弹窗代码里 调用stopBodyScroll ();
var bodyEl = document.body;
var scrollTop = 0;
function stopBodyScroll (isFixed) {
bodyEl.style.left = '0';
bodyEl.style.width = '100%';
if (isFixed) {
scrollTop = $(window).scrollTop();
bodyEl.style.position = 'fixed';
bodyEl.style.top = -scrollTop + 'px';
} else {
bodyEl.style.position = '';
bodyEl.style.top = '';
window.scrollTo(0, scrollTop) // 回到原先的top
}
}
以上代码可解决移动端滚屏问题,希望能对大家有用,另外欢迎评论区给出更加高效的方法,谢谢。