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

2022-12-09 11:09:12

最近一个需求是弹窗展示列表，显然是需要一个滚动条的，而滚动到底部就会穿透到body滚动，而阻止默认行为是不行的，这样两个都滑动不了

所以我在点击出现弹窗的时候在body加了以下css让它没有滚动效果

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

但是这样又出来一个问题，会在弹窗出来的时候body直接回到顶部，显然不是我愿意要的，所以这时候就需要让body显示在之前的高度，所以我们可以获取点击时body被卷去的高度bodyScroll=$("body").scrollTop();并且给body定位，就可以实现我们所需要的了

var bodyScroll=$("body").scrollTop();
 $("body").css({
         overflow:"hidden",
         position:'fixed',
         top:-bodyScroll
       });

关闭弹窗的时候在恢复之前的就可以了，并且滚动到原先的位置

 $("body").css({
         'overflow':'auto',
         'position': 'static',
         'top': 'auto'
       });
$("body").scrollTop(bodyScroll);

在安卓和苹果经过测试没有出什么bug，希望也可以解决你们的问题。

码农公寓