绝对定位元素在移动设备上添加滚动答案

【问题标题】：absolutely positioned elements adding scroll on mobile绝对定位元素在移动设备上添加滚动
【发布时间】：2021-01-28 08:37:51
【问题描述】：

我想要一个页面占据客户端窗口的全部高度和宽度。我希望能够使用 position=absolute 在页面内定位 div，并具有指定的变换。他们将在桌子上打牌，所以他们会有 x、y 和旋转。这一切都很好，但是在移动设备上，当绝对定位的元素之一超出父元素的边界时，浏览器会添加一个滚动条并让您滚动到超出边界的元素。我发现我可以通过在父级上使用 clip-path: inset(0) 来剪辑绝对定位元素的呈现，但是移动页面仍然允许您滚动到应用程序之外的白色部分。有没有其他方法可以将视口限制在正文中，这样我就可以保持整页的非滚动体验？由于绝对定位，我不认为 overflow:hidden 在这里工作。

这里有一个例子。 https://ddeklotz-static-page.s3.amazonaws.com/example.html

<html>
  <head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="app">
      <div class="square"/>
    </div>
  </body>
</html>



body {
    margin: 0;
    overflow: hidden;
}

.app {
    background-color: red;
    min-height: 100vh;
    clip-path:inset(0);
}

.square {
  background-color: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  transform: translate(330px, 50px) rotate(20deg);
}

【问题讨论】：

我们在哪里可以看到这个工作？
@AndyHoffman 我在说明中添加了一个链接。

标签： html css mobile responsive-design

【解决方案1】：

我想我找到了一些可行的方法：我需要将“user-scalable=0”添加到我的视口元标记的内容中。看起来像在缩小视口以显示剪辑的 div 边界区域的全部范围之前，这不是我想要的。我认为，禁用用户缩放意味着我们只保留布局视口。

看起来我也可以使用 position:fixed（而不是 absolute）来解决这个问题，但这会使 div 的定位更加困难（因为它们的父级不太可能与视口）。

【讨论】：