position: fixed 在ios手机上会跟随滚动，怎么解决

在 iOS 上，`position: fixed` 在默认情况下会在滚动时跟随页面滚动。解决这个问题的一种方法是使用 `-webkit-overflow-scrolling: touch` 属性，该属性会在滚动时启用 iOS 的原生滚动效果，这样可以使 `position: fixed` 元素固定在页面上而不会跟随滚动。

例如，可以通过以下 CSS 来解决这个问题：

body {
  -webkit-overflow-scrolling: touch;
}

.fixed-element {
  position: fixed;
}

这将使 `body` 元素使用 iOS 的原生滚动效果，并使任何具有 `position: fixed` 属性的元素在页面上固定，而不会跟随滚动。

相关问题

h5 position: fixed 在ios手机上会跟随滚动，怎么解决

在 iOS 上，`position: fixed` 在默认情况下会在滚动时跟随页面滚动。解决这个问题的一种方法是使用 `-webkit-overflow-scrolling: touch` 属性，该属性会在滚动时启用 iOS 的原生滚动效果，这样可以使 `position: fixed` 元素固定在页面上而不会跟随滚动。

例如，可以通过以下 CSS 来解决这个问题：

body {
  -webkit-overflow-scrolling: touch;
}

.fixed-element {
  position: fixed;
}

这将使 `body` 元素使用 iOS 的原生滚动效果，并使任何具有 `position: fixed` 属性的元素在页面上固定，而不会跟随滚动。

ios 16.3 以上系统 position:fixed,position:sticky 会跟随滚动，怎么解决

在 iOS 16.3 及以上系统中，`position:fixed` 和 `position:sticky` 会跟随滚动。这是由于 iOS 13 引入了新的滚动机制，称为“弹性滚动”（Bouncy Scrolling），导致这些元素无法像之前一样工作。

要解决这个问题，可以尝试以下几种方法：

1. 使用 JavaScript 进行滚动监听，当页面滚动时，动态改变元素的位置。这种方法需要一定的编程能力，但可以确保元素在页面上始终保持固定位置。

2. 使用 CSS 属性 `-webkit-overflow-scrolling: touch`，这个属性可以禁用 iOS 的弹性滚动，但会导致页面滚动时的性能问题。

3. 将元素的 `position` 属性改为 `absolute`，并将其包裹在一个具有 `position: relative` 属性的容器中。这种方法可以确保元素在页面上始终保持固定位置，但需要注意容器的位置和大小。

需要根据实际情况选择最适合的解决方案。