第14天 position:fixed;在ios下无效该怎么办?
Activity
hx891124 commentedon Jun 11, 2019
容器撑满,用absolute 模拟fixed定位
chenliwen123 commentedon Jul 10, 2019
把需要用手滑动的内容用clss为.content(名字随便起)的div包起来,样式代码如下:
.content {
position: fixed;
top: 0;
left: 0;
bottom: 180px; /距离底部的距离为底部盒子的高度,自己也可以设置/
overflow-y: scroll;
width: 100%;
height: auto;
-webkit-overflow-scrolling: touch; /这句是为了滑动更顺畅/
}
-webkit-overflow-scrolling: touch; /这句是为了滑动更顺畅/
这句代码一定得写,要不上下滑动起来有些卡顿,亲自体验过的。
然后把需要固定在底部的内容用class为.footer(名字随便起)的div包起来,样式代码如下:
.footer {
position: fixed;
bottom: 0;
height: 180px;
}
这样,在真机上再次测试就没有问题了。如有更好的解决办法,希望大家互相交流。
作者:贵林之恋
来源:CSDN
原文:https://blog.csdn.net/zyg1515330502/article/details/79207334
Konata9 commentedon Jul 27, 2019
当采用
fixed
做吸底、吸顶布局时,如果触发键盘弹出事件则fixed
属性会失效,布局就会被扰乱。其原因解释如下:** 第三方库
isScroll.js
可以解决此问题。解决的思路就是避免最外层出现滚动,即最外层使用
fixed
并且不让其可以滚动。让滚动仅在内部内容部分。参考文章: Web 移动端 Fixed 布局的解决方案
giggleCYT commentedon Jun 15, 2020
参考文章
smile-2008 commentedon Sep 10, 2020
当采用 fixed 做吸底、吸顶布局时,如果触发键盘弹出事件则 fixed 属性会失效,布局就会被扰乱。其原因解释如下:
软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。
** 第三方库 isScroll.js 可以解决此问题。
amikly commentedon Nov 2, 2021
解决方法
在内容区(main)内实现内部滚动
Iambecauseyouare commentedon Feb 25, 2023
iOS下的 Fixed + Input BUG现象:fixed 元素在软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了
提交 header, footer, main { display: block; } header { position: fixed; height: 50px; left: 0; right: 0; top: 0; } footer { position: fixed; height: 34px; left: 0; right: 0; bottom: 0; } main { margin-top: 50px; margin-bottom: 34px; height: 2000px } 使 fixed 元素的父级不出现滚动,而将原 body 滚动的区域域移到 main 内部,而 header 和 footer 的样式不变header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
/* main绝对定位,进行内部滚动 /
position: absolute;
top: 50px;
bottom: 34px;
/ 使之可以滚动 /
overflow-y: scroll;
/ 增加该属性,可以增加弹性 */
-webkit-overflow-scrolling: touch;
}
main .content {
height: 2000px;
}
在 Android2.3+ 中,因为不支持 overflow-scrolling ,因此部分浏览器内滚动会有不流畅的卡顿。但是目前发现在 body 上的滚动还是很流畅的,因此使用第一种在 iOS 出现问题的 fixed 定位的布局就可以了。如果需要考虑 Android2.3 以下系统,因为不支持 fixed 元素,所以依然要需要考虑使用 isScroll.js 来实现内部滚动。基本思路就是: 由于 fixed 在软键盘唤起后会失效,导致在页面可以滚动时,会跟随页面一起滚动。因此如果页面无法滚动,那么 fixed 元素即使失效,也不会滚动
其他的一些细节处理
有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 scrollIntoView 进行修复。
有些第三方浏览器底部的工具栏是浮在页面之上的,因此底部 fixed 定位会被工具栏遮挡。解决办法适配不同的浏览器,调整 fixed 元素距离底部的距离。
最好将 header 和 footer 元素的 touchmove 事件禁止,以防止滚动在上面触发了部分浏览器全屏模式切换,而导致顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。
an31742 commentedon Aug 14, 2023
解决 position: fixed 在 iOS 下无效的问题:
position: fixed;
是一种用于固定元素位置的 CSS 属性。然而,iOS 在某些情况下可能不完全支持此属性。以下是一些可能的解决方法:使用 Transform: 尝试将固定元素的样式更改为使用
transform: translate3d(0, 0, 0);
。这可能会触发硬件加速,从而解决位置问题。添加 Overflown 容器: 将需要固定位置的元素放置在一个具有固定高度和
overflow: auto;
样式的容器内。这可以使元素在容器内固定,并在 iOS 上正常工作。避免 Fixed 元素: 考虑在移动设备上使用其他布局方式,避免使用固定定位,以便更好地适应不同的浏览器和设备。
JavaScript Polyfills: 某些 JavaScript 库可以提供对
position: fixed;
的支持,即使在 iOS 下也能正常工作。您可以尝试寻找这些库,并根据需要集成到您的项目中。请根据您的具体情况选择适当的解决方案。如果问题仍然存在,您可能需要进行更深入的调查,或考虑根据您的项目需求采取其他措施。
pengsir120 commentedon Sep 22, 2024
1.为父元素添加-webkit-overflow-scrolling:touch属性
2.使用position:sticky
3.使用JavaScript兼容性解决方案