1.安装程序：

<!-- styles -->
<style>
  body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
  }

  .square {
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>

个字符
2.将以下CSS属性添加到.square：

position: absolute;
left: 100%;
top: 0;

型
3.在浏览器中观察页面：
如果您从桌面视图查看它，它会按预期工作（页面是空的，没有滚动条出现，不能滚动）。
打开DevTools，然后单击“切换设备工具栏”（ctrl + shift + m）。现在，尝试向右滚动。您将看到红色方块。出于某种原因，您也可以向下滚动。
screenshot (notice the overflow:hidden applied to body)-在此截图页面上已经向右滚动。
另外，如果你将left: 100%改为right: 100%，它会像预期的那样工作。对transition: translateX()也一样。
deployed version的
在Edge（桌面，设备工具栏打开），三星互联网和Chrome（移动的）上观察到了同样的行为。我还通过BrowserStack检查了这个问题：这个问题在Chrome v90，101和105上仍然存在。
Chrome桌面版：120.0.6099.130（Official Build）（64-bit）（队列：稳定）
Chrome移动的版本：120.0.6099.144（Official Build）（64-bit）