iOS上固定定位元素滚动问题

Question

我正在构建一个移动项目，其中有许多模块，这些模块的元素被定位为固定位置。我遇到的问题只出现在运行在iOS上的浏览器中。 确切的问题是，每当我尝试在页面主体上滚动时，例如底部工具栏被固定，整个固定元素都会相应地随着滚动而移动，直到滚动完全结束，它才回到其指定的位置。

我已经给页面主体设置了相对的CSS规则。 请帮忙解决，因为这只发生在iOS上。

 .add-to-block {
    background: #fff;
    position: fixed;
    bottom: 0px;
    right: 0px;
    display: block;
    height: auto;
    width: 100%;
    *(inner content element) {
        inner content element styling...
     }
}

- Aman Pandey

---

你可以修好这个问题吗？ 我在2017年使用Ionic 2时遇到了同样的问题。 在Android上，我的导航栏工作正常，但在IOS上它会随着滚动而移动，当它停止时，它会返回到原来的位置。 - Ivan Lencina

我创建了这个悬赏。我有同样的问题。我有固定元素（Hafebar、Red John等），它们在Y轴上滚动，使用transform（因此我不能使用下面的帖子），并且在X轴上使用position fixed固定。当快速滚动X时，固定元素（Hafebar、Red John等）会随着滚动而移动，并在停止滚动时返回原始位置。 - olivier

我曾经遇到过同样的问题，我只是将固定元素从可滚动的 div 中移除，这解决了我的问题。如果你的情况允许的话，你也可以尝试这样做。希望能有所帮助。 - Piyush Verma

Answer 1

请尝试这个，在此处查看源代码：here

    .add-to-block {
        transform: translate3d(0,0,0);
        .....
        .....
    }

- Abed Putra

---

它为我节省了很多时间。 - Kenneth Chan

Answer 2

对于这个问题，没有一个简单的答案，因为它在ios上已经是一个众所周知的问题（据说在ios8中修复了），但是以下方法可以帮助您解决它：https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios。该链接详细介绍了ios设备上position fixed存在的所有问题以及可能的解决方法（如果您需要使用它）。

- Steven Hoskins

Answer 3

为固定元素添加 height: 100% 和 overflow: auto。

完整示例请参见 https://codepen.io/astnt/pen/ExgOqeX。

- Anton Starcev

Answer 4

Safari允许您滚动超出固定div的限制，以产生漂亮的弹跳效果。然而，当您滚动到这个点之后，如果有一个可滚动的容器，那么随后的触摸事件将被交给它。因此，在控制权被交还给固定div之前，滚动一段时间都没有作用。

解决方法是给容器div添加overflow-y: hidden样式，这样Safari就不会移交触摸事件，我们可以继续与固定div进行交互。

- mrded

Answer 5

虽然我在滚动的 div 中有固定元素（并将其向上移动），父元素没有 transform 或其他创建层的属性（并在固定元素上创建了一个层）等，但是所有提出的解决方案都对我无效。

我的解决方案是将固定元素更改为 position: sticky;

- tuberains