Question

我希望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?

将此代码放在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>

Answer 1

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

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

如何在Safari Mobile上隐藏溢出？

1 个答案: