4

我们正在忙着为平板电脑编写一个 Web 应用程序。

在这个应用程序中，我们有一个放置内容的主要内容 div，一些页面/幻灯片的内容超出了视口允许的范围，因此我们在内容 div 中添加了以下 CSS；

#canvas {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.content {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.absoluteElement {
    position: absolute;
    left: 20px;
    top: 20px;
}

HTML：

<div id="canvas">
  <div class="content">
    <div class="absoluteElement">This is absolute!</div>
  </div>
</div>

这在 iPad 和桌面上完美运行，但我们在绝对或固定放置的子元素方面存在一些问题。当我们在 iPad 上滚动页面时，绝对放置的元素也在 iPad 上移动，直到我们不触摸屏幕（然后它回到绝对定位位置），但不在桌面上（因为它应该）。这只发生在我们启用 -webkit-overflow-scrolling: touch 选项时。当我们禁用此选项时，iPad 上的问题就消失了，但滚动本身非常缓慢且麻烦。

为了您的信息，绝对放置的元素（.absoluteElement，应该是绝对的#canvas div，而不是内容）。

我们怎样才能轻松解决这个问题？

4

0 回答 0