移动端的弹窗滚动禁止body滚动

Z时代
2024-01-10
分类：综合

coding

本文转载于:专业的前端网站➼移动端的弹窗滚动禁止body滚动

前言

最近一个需求是弹窗展示列表，显然是需要一个滚动条的，而滚动到底部就会穿透到body滚动，而阻止默认行为是不行的，这样两个都滑动不了
所以我在点击出现弹窗的时候在body加了以下css让它没有滚动效果

$("body").css({
         overflow:"hidden",
         height:"100%"       });

但是这样又出来一个问题，会在弹窗出来的时候body直接回到顶部，显然不是我愿意要的，所以这时候就需要让body显示在之前的高度，所以我们可以获取点击时body被卷去的高度bodyScroll=$("body").scrollTop();并且给body定位，就可以实现我们所需要的了 ```JavaScript var bodyScroll=$("body").scrollTop();
$("body").css({
overflow:"hidden",
position:'fixed',
top:-bodyScroll
});
关闭弹窗的时候在恢复之前的就可以了，并且滚动到原先的位置JavaScript
$("body").css({
'overflow':'auto',
'position': 'static',
'top': 'auto'
});
$("body").scrollTop(bodyScroll);
```
在安卓和苹果经过测试没有出什么bug，希望也可以解决你们的问题。