iOS上位置固定元素的滚动问题答案

【问题标题】：Scrolling issue on position fixed element on iOSiOS上位置固定元素的滚动问题
【发布时间】：2014-12-15 08:51:25
【问题描述】：

我正在构建一个移动项目，其中包含许多具有固定元素的模块。面临的问题仅在 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...
     }
}

【问题讨论】：

你能解决它吗？我在 2017 年使用 Ionic 2 时遇到了同样的问题。在 Android 中，我的导航栏工作正常，但在 IOS 中它随着滚动而移动，当它停止时，它会返回到它的位置。
imgur.com/a/2otaHxz 我创造了这个赏金。我有同样的问题。我有固定的元素（Hafebar、Red John 等），这些元素在 Y 轴上通过变换滚动（所以我不能使用下面的帖子）并且在 X 轴上固定位置并固定。当快速滚动 X 时，固定元素（Hafebar、Red John 等）会随着滚动而移动，并在我停止滚动时返回到原始位置。
我曾经遇到过同样的问题，我只是从可滚动的 div 中删除了固定元素，这解决了我的问题，如果可能的话，你也可以尝试一下。希望对你有帮助

标签： ios css scroll css-position fixed

【解决方案1】：

请试试这个，来源here

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

【讨论】：

它节省了我很多时间。

【解决方案2】：

这并不是一个简单的答案，因为它在 ios 上已经存在一段时间了（据说在 ios8 中已修复），但这为您提供了一些解决方法：https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios 它详细说明了所有问题固定在 ios 设备上的位置以及如果需要使用它的可能修复方法。

【讨论】：

【解决方案3】：

Safari 允许您滚动超出固定 div 的限制，这样它就可以产生很好的有弹性的效果。但是，当您滚动超过这一点时，如果有一个可滚动的容器，那么后续的触摸事件就会传递给它。因此，在控制权交还给固定 div 之前，滚动不会有任何作用。

解决方法是为容器 div 赋予 overflow-y: hidden 样式，这样 Safari 就不会放弃触摸，我们会继续与固定的 div 交互。

【讨论】：

【解决方案4】：

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

https://codepen.io/astnt/pen/ExgOqeX 上的完整示例

【讨论】：

【解决方案5】：

没有一个建议的解决方案对我有用，尽管我在滚动 div 中有固定元素（并将其向上移动），在父元素上没有变换或其他图层创建属性（并且在固定元素上创建了一个图层）元素）等。

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

【讨论】：