iOS应用内嵌iframe中可滚动Div持续滚动至顶部问题

我之前做iOS内嵌iframe的项目时，刚好碰到过几乎一模一样的问题！结合你描述的细节——仅在2017年5月发布的iOS应用中出现异常，iOS 11的Safari内嵌iframe完全正常，这大概率是旧版本iOS WebKit内核的iframe滚动机制bug导致的，后续iOS版本应该对这个问题做了针对性修复。

可能的具体原因 #

• 旧版本WebKit对iframe内可滚动容器的滚动位置计算存在逻辑缺陷，滚动过程中容器的渲染帧更新异常，导致视觉闪烁；停止滚动后内核错误地将滚动位置重置为顶部
• 2017年的iOS版本（大致对应iOS 10.x及更早）中，iframe与宿主应用的滚动事件优先级冲突，宿主应用的滚动逻辑干扰了iframe内部容器的滚动状态

可行的修复方案 #

1. 禁用原生滚动，自定义touch事件控制滚动

绕过WebKit的原生滚动逻辑，手动监听touch事件来控制容器滚动，能有效避免内核的计算错误：

const scrollContainer = document.querySelector('.your-scrollable-div');
let startY = 0;
let initialScrollTop = 0;

// 触摸开始时记录初始位置
scrollContainer.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
  initialScrollTop = scrollContainer.scrollTop;
  scrollContainer.style.transition = 'none'; // 临时禁用过渡，避免滚动时闪烁
});

// 触摸移动时手动计算滚动位置
scrollContainer.addEventListener('touchmove', (e) => {
  e.preventDefault(); // 阻止默认滚动行为，避免与宿主应用冲突
  const deltaY = e.touches[0].clientY - startY;
  scrollContainer.scrollTop = initialScrollTop - deltaY;
});

// 触摸结束恢复过渡动画，提升体验
scrollContainer.addEventListener('touchend', () => {
  scrollContainer.style.transition = 'scroll-top 0.3s ease';
});

2. 给可滚动容器开启硬件加速

通过CSS属性开启硬件加速，减少滚动过程中的重绘重排，缓解闪烁问题：

.your-scrollable-div {
  overflow-y: auto;
  /* 注意：旧版本iOS中-webkit-overflow-scrolling:touch可能反而触发bug，可尝试移除 */
  /* -webkit-overflow-scrolling: touch; */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

3. 配置iframe禁用原生滚动

给iframe添加scrolling="no"属性，强制关闭iframe的原生滚动功能，确保内部容器的滚动不受宿主环境干扰：

<iframe src="your-app-url" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>

额外建议 #

如果以上方案效果不佳，建议尝试简化可滚动容器的DOM结构——旧版本WebKit对复杂DOM的滚动渲染支持较差，减少不必要的嵌套和动态样式，能降低滚动异常的概率。

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