使用场景: 移动端弹框内容和较多,需要滑动,但是body页面也会随之一起滑动,会干扰用户的关注点,体验效果不好,所以就需要在弹框滑动时,禁止页面滑动,并且需要记录点击弹框时页面距离顶部的距离,否则在页面滑动过一段距离时,点击弹框,页面会瞬间调到顶部。
在试了一些网上的方法后,最后总结出以下方法,在移动端测试过是OK的,但是没有测试过所有的机型。
// 点击弹框时
// 需要先获取去body的top值,再给body定位,否则先定位的话,top值会先变成0
document.body.style.top = `${document.body.getBoundingClngClientRect().top}px`;
document.body.style.position = 'fixed';
// 取消弹框时在取消定位
document.body.style.top = `0px`;
document.body.style.position = 'static';