如何在 Safari Mobile 上隐藏溢出？答案

【问题标题】：How to hide overflow on Safari Mobile?如何在 Safari Mobile 上隐藏溢出？
【发布时间】：2017-04-27 21:24:45
【问题描述】：

我希望 Safari 移动设备上的视口能够防止水平滚动并隐藏任何水平溢出内容。原因是我在网站上有一些动画可以将内容移出屏幕。作为一种解决方法，我可能无法制作动画，但我想让它在移动设备上运行。

当使用 Safari 在 iPhone 6 上查看时，下面的代码允许水平滚动并仍然显示溢出内容。

我看到四篇关于该主题的帖子，但使用 overflow: hidden 的建议无效。

overflow-x: hidden, is not working in safari

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

Mobile Safari Viewport - Preventing Horizontal Scrolling?

Hiding the scrollbar on an HTML page

将此代码放在服务器上的index.html 中，以便可以在 iPhone 上查看该页面：

<!DOCTYPE html>
<html>
<head>
    <meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
    <style>
    html {
      overflow-x: hidden;
    }

    body {
        background-color: black;
        overflow-x: hidden;
    }

    #content {
      width: 100%;
      overflow-x: hidden;
    }

    .tagline {
      color: white;
      font-size: 1.8em;
      font-style: italic;
      position: absolute;
      white-space: nowrap;
      overflow-x: hidden;
      top: 10%;
      left: 80%; /* This position is off screen on purpose */
    }
    </style>
</head>

<body>
  <div id="content">
    <span class="tagline">Testing span reaching outside edge of window on mobile</span>
  </div>
</body>

</html>

【问题讨论】：

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers的可能重复
这个答案帮助了我：stackoverflow.com/a/46039555/502846

标签： ios css safari horizontal-scrolling

【解决方案1】：

如果你 position:fixed; #content 它会阻止它滚动：

#content {
  width: 100%;
  overflow-x: hidden;
  height: 100%;
  position: fixed;
}

【讨论】：

谢谢。但是，我需要页面垂直滚动，而不是水平滚动。很高兴看到有一种方法可以限制所有方向的滚动，但是唉，下面有内容。
它仍然垂直滚动。请参阅此处的示例：bencolgate.co.nz/temp/overflow.html
好的，我明白了，谢谢。我稍后会进行更多测试并发布结果。