css fixed 定位 在ios手机上会跟随滚动,怎么解决
时间: 2024-02-24 07:54:37 浏览: 254
解决Vue页面固定滚动位置的处理办法
在 iOS 上,当使用 `position: fixed` 样式时,会出现元素跟随滚动的问题。这是因为 iOS 默认为页面添加了一个滚动条,而 `position: fixed` 元素是相对于整个页面定位的,所以会跟随页面滚动。
为了解决这个问题,可以添加以下样式:
```
body {
position: relative;
overflow-x: hidden;
}
```
这会将 `body` 元素的定位方式设置为相对定位,并禁止页面在水平方向上滚动。这样,在 iOS 上使用 `position: fixed` 样式时,元素就不会跟随页面滚动了。
如果你只想禁止某个元素在 iOS 上跟随滚动,可以将其父元素设置为相对定位,并将其自身设置为绝对定位,例如:
```
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
}
```
这样,在 iOS 上滚动页面时,`.child` 元素就不会跟随滚动了。
阅读全文