设置overflow:hidden的div及body标签在移动端仍可滚动问题求助

核心原因是移动端Webkit内核浏览器会将<html>、<body>的溢出规则和系统级视口滚动逻辑绑定，仅设置overflow: hidden无法阻断默认滚动行为，wrapper不生效多数是布局属性配置不全导致，可按以下步骤修复：

• 给动画wrapper提前写死固定定位全视口样式，不要动态插入wrapper节点，直接放在HTML结构body末尾即可：

.transition-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden !important;
  z-index: 9999;
  pointer-events: none;
}

• 动画触发时同步给页面加滚动锁，不要仅依赖wrapper的溢出属性：

.scroll-lock {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none !important;
}

对应的jQuery操作逻辑：

// 动画触发前执行
const savedScrollTop = $(window).scrollTop()
$('html, body').addClass('scroll-lock').css('top', `-${savedScrollTop}px`)
// 插入圆形动画元素
$('.transition-wrapper').append('<img src="你的圆形PNG资源路径" class="transition-circle">')
// 动画结束后清理
$('.transition-circle').on('animationend', function() {
  $(this).remove()
  $('html, body').removeClass('scroll-lock').removeAttr('style')
  $(window).scrollTop(savedScrollTop)
})

如果你的圆形动画只做遮罩过渡用，可以把PNG替换成CSS径向渐变实现的圆形，性能比加载PNG资源更高，也不会出现缩放时的边缘模糊问题。

内容的提问来源于stack exchange，提问作者Matias Cugno