返回

困扰Safari已久的问题，终于有人解决了

Android

iOS Safari 上的滚动难题：告别overflow: scroll 的局限

作为一名 Web 开发人员，你是否遇到过这种情况：在 iOS Safari 浏览器中，使用 overflow: scroll / auto 时，内部子元素无法正常滚动？如果你遇到了这个问题，你并不孤单。这是一个众所周知的问题，但现在终于有了解决方案。

问题根源：定位、overflow 和动态大小

iOS Safari 中的滚动问题出现于特定条件下：

  1. 父元素使用绝对定位或固定定位
  2. 使用 overflow: scroll / auto
  3. 内部子元素具有动态大小（例如：较大的 SVG 文档）

当这些条件同时满足时，iOS Safari 就会出现滚动异常。

解决方案：-webkit-overflow-scrolling

解决此问题的关键在于一个名为 -webkit-overflow-scrolling 的属性。此属性是专为 iOS Safari 设计的，可以解决滚动问题。只需将此属性添加到父元素即可：

<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch;">
  <svg width="2000" height="2000"></svg>
</div>

通过添加 -webkit-overflow-scrolling: touch;，就可以解决 iOS Safari 上的滚动问题。

代码示例

为了更好地理解，这里提供了一个代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    #container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }

    #content {
      width: 2000px;
      height: 2000px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="content"></div>
  </div>
</body>
</html>

你可以在此 演示地址 查看实际效果。

总结

iOS Safari 上的滚动问题困扰了 Web 开发人员很长时间，但现在有了 -webkit-overflow-scrolling 属性，我们终于可以轻松解决它。使用此属性，你可以让内部子元素在 iOS Safari 中顺畅滚动，为用户提供更好的浏览体验。

常见问题解答

  1. 为什么会出现这个问题？
    问题出现在父元素使用绝对或固定定位、使用 overflow: scroll / auto 且内部子元素具有动态大小时。

  2. -webkit-overflow-scrolling 属性是什么？
    -webkit-overflow-scrolling 是一个专为 iOS Safari 设计的属性，可以解决滚动问题。

  3. 如何使用 -webkit-overflow-scrolling？
    将其添加到父元素的样式中，如下所示：
    -webkit-overflow-scrolling: touch;

  4. 有什么需要注意的？
    该属性仅适用于 iOS Safari 浏览器。

  5. 为什么不使用 overflow: scroll / auto？
    在 iOS Safari 中，overflow: scroll / auto 无法解决此问题。