Question

这是一个简单的html文档，其中有一个div由于水平转换而向右溢出文档。但是因为溢出被设置为隐藏在html标记上，我希望没有滚动条。这是Google Chrome中的情况，但是当我在移动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 dev工具并启用设备指标覆盖来模拟移动设备来重现它。 https://dl.dropboxusercontent.com/u/78736800/overflowscrollbug.html

Answer 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>

为什么不在移动webkit中的html标签上溢出滚动？

1 个答案: