时间戳

首页 > 解决方案 > 在移动设备上添加滚动的绝对定位元素

html - 在移动设备上添加滚动的绝对定位元素

问题描述

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

这是一个例子。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);
}

在此处输入图像描述

标签： htmlcssmobileresponsive-design

解决方案

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

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

推荐阅读