IOS Safari 中的滚动问题

Question

我有这个代码：

<div style="height: calc(100vh - 200px); overflow: hidden auto;">
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
  <div class="item">test</div>
</div>

元素滚动仅适用于 Safari 移动版 (IOS)。它看起来像是溢出隐藏样式，但我检查了 Safari 并像在其他设备中一样应用了所有样式。所以样式可能一切都好，但它不起作用，我不知道为什么。

我尝试了很多 CSS hack 来解决这个问题。

Answer 1

如果元素滚动在 Safari 移动版 (iOS) 中未按预期工作，有一些常见原因可能会导致该问题。以下是一些可能的解决方案和需要检查的事项：

1. 检查 Safari 版本：确保您在 iOS 上的最新版本 Safari 上进行测试。旧版本的 Safari 可能存在错误或缺乏对某些 CSS 功能的支持。

2. 硬件加速：iOS 上的 Safari 可能会禁用具有某些 CSS 属性的元素的硬件加速，从而导致滚动问题。要启用硬件加速，您可以尝试将以下 CSS 添加到滚动容器：

.scroll-container { 变换：translate3d(0, 0, 0); }

3. 触摸滚动：确保元素启用触摸滚动。默认情况下，触摸滚动应该可以工作，但如果有冲突的 CSS 样式或 JavaScript 事件干扰它，它可能无法按预期工作。

4. 避免溢出剪切：确保没有具有溢出：隐藏样式的父元素可能会剪切可滚动区域。检查 .scroll-container 的整个祖先链，以确保它们都没有溢出：隐藏。

5. 检查 JavaScript 干扰：如果您有任何 JavaScript 代码 处理触摸或滚动事件，确保它不会阻止 默认行为或干扰滚动行为。

6. 内容大小：确保 .scroll-container 内的内容足够大以需要滚动。如果内容的高度小于容器的高度，则不会触发滚动。

7. 使用 -webkit-overflow-scrolling: touch;: 将以下 CSS 添加到 .scroll-container 以在 Safari 中启用平滑的触摸滚动：

.scroll-container { -webkit-overflow-scrolling: touch;}

8. 在其他设备上进行测试：如果可能，请在其他 iOS 设备和浏览器上测试相同的代码，以检查该问题是 iOS 上的 Safari 特有的还是更普遍的问题。 如果尝试这些解决方案后滚动问题仍然存在，则可能是特定的样式组合或其他因素导致了该问题。在这种情况下，您可能需要进一步调查或考虑提供有关用于更详细分析的特定代码和样式的更多信息。

Answer 2

已修复。它来自IOS版本。 IOS更新后这个问题已经解决。所以这不是代码级错误。