带有-webkit-overflow-scrolling的可滚动Div：iFrame内的触摸在iOS 10移动Safari中不起作用答案

【问题标题】：Scrollable Div with -webkit-overflow-scrolling:touch inside iFrame not working in iOS 10 mobile Safari带有-webkit-overflow-scrolling的可滚动Div：iFrame内的触摸在iOS 10移动Safari中不起作用
【发布时间】：2019-08-15 13:38:25
【问题描述】：

我有一个 iFrame，其中包含一个可以滚动的 div（只是 div，而不是整个 iFrame）。现在这在大多数浏览器中都可以正常工作，但在 iOS 10（用 iPhone 7 测试）中不行，因为没有什么是可移动的： https://codepen.io/arichter83/full/OJLNjey

iFrame 之外的修复

将-webkit-overflow-scrolling:touch;overflow-y:scroll;height:300px 添加到 iFrame 本身时，它可以工作：https://codepen.io/arichter83/full/xxKVpbL

但这似乎是 iOS 10 的一个错误，因为如果将这些参数添加到 iFrame 之外的其他 div 也可以：https://codepen.io/arichter83/full/PoYNEoX

iFrame 内的修复

但实际上我的情况是，我无法控制 iFrame 之外的内容，那么有人知道解决方法吗？

我试过了：

切换到-webkit-overflow-scrolling:auto;
将-webkit-transform: translateZ(0); 或-webkit-overflow-scrolling: touch; transform: translate3d(0, 0, 0); 添加到body

【问题讨论】：

标签： ios css iframe scroll mobile-safari

【解决方案1】：

过去在处理 iOS 时，我强制在 body 上进行硬件加速来处理滚动问题。

body { 
  -webkit-overflow-scrolling: touch;
  transform: translate3d(0, 0, 0);
}

没有足够的积分来添加评论 - 认为这可能会有所帮助。

【讨论】：

谢谢你，是的，这在过去也帮助过我类似的情况，但在这里没有帮助！

【解决方案2】：

我找到了一种解决方案，但它很老套：

function resetScroller() {
  scroller = document.getElementById('scroller')
  scroller.style.webkitOverflowScrolling = 'auto'
  scroller.style.display = 'none'
  window.setTimeout(() => {
    scroller.style.display = 'block'
  }, 0)
}

将-webkit-overflow-scrolling: touch;改为-webkit-overflow-scrolling: auto;，隐藏元素，稍等片刻再显示。

这只能在 iOS 10 上完成，条件如下：

const ios_version = window.navigator.userAgent.match(/(iPad|iPhone|iPod).* OS ([0-9]+)/)[2] as unknown as number
if(ios_version > 0 && ios_version <= 10) {
  ...
}

我在 iFrame 内容中添加了一个按钮，以便对其进行测试：https://codepen.io/arichter83/full/OJLNjey

【讨论】：