为什么不在移动webkit中的html标签上溢出滚动？-Java 学习之路

这是一个简单的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

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>

回复于 2024-04-27T14:05:58+08:00

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

1 回答

相关问题