为什么溢出滚动对移动 webkit 中的 html 标记不起作用？答案

【问题标题】：Why doesn't overflow scroll work on the html tag in mobile webkit?为什么溢出滚动对移动 webkit 中的 html 标记不起作用？
【发布时间】：2013-10-25 05:30:11
【问题描述】：

这是一个简单的 html 文档，其中有一个 div 由于水平平移而向右溢出了文档。但是由于在 html 标记上将溢出设置为隐藏，我希望没有滚动条。谷歌浏览器就是这种情况，但是当我在移动 webkit 或移动 safari 中加载此文档时，我可以滚动。这是一个错误吗？我该如何解决这个问题？

<html>
<head>
  <title>test</title>
  <style type="text/css">
    html {
      background: lightgray;
      overflow: hidden;
    }
    .test {
      width: 100%;
      -webkit-transform: translate3d(90%, 0, 0);
      height: 100px;
      background: grey;
    }
  </style>
</head>
<body>
<div class="test"></div>
</body>
</html>

要重现此问题，您可以在移动 Safari 或移动 webkit 中打开此链接。您还可以通过打开 chrome 开发工具并启用设备指标覆盖来模拟移动设备来重现它。 https://dl.dropboxusercontent.com/u/78736800/overflowscrollbug.html

【问题讨论】：

标签： html css webkit mobile-safari mobile-webkit

【解决方案1】：

您还应该隐藏body 的溢出。我进行了快速测试，这在移动 Safari 中起到了作用：

<style type="text/css">
html, body {
    background: lightgray;
    overflow: hidden;
}
.test {
    width: 100%;
    -webkit-transform: translate3d(90%, 0, 0);
    height: 100px;
    background: grey;
}
</style>

【讨论】：