New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css] 第14天 position:fixed;在ios下无效该怎么办? #43
Comments
容器撑满,用absolute 模拟fixed定位 |
把需要用手滑动的内容用clss为.content(名字随便起)的div包起来,样式代码如下: .content { .footer { 作者:贵林之恋 |
当采用
** 第三方库 解决的思路就是避免最外层出现滚动,即最外层使用 参考文章: Web 移动端 Fixed 布局的解决方案 |
当采用 fixed 做吸底、吸顶布局时,如果触发键盘弹出事件则 fixed 属性会失效,布局就会被扰乱。其原因解释如下: 软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。 ** 第三方库 isScroll.js 可以解决此问题。 |
解决方法在内容区(main)内实现内部滚动 main {
/* main绝对定位,进行内部滚动 */
position: absolute;
/*top是头部的高度*/
top: 50px;
/*bottom是底部的高度*/
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
/* 增加该属性,可以增加弹性 */
-webkit-overflow-scrolling: touch;
} |
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 { header { footer { main .content { 其他的一些细节处理 有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 scrollIntoView 进行修复。 |
解决 position: fixed 在 iOS 下无效的问题:
请根据您的具体情况选择适当的解决方案。如果问题仍然存在,您可能需要进行更深入的调查,或考虑根据您的项目需求采取其他措施。 |
第14天 position:fixed;在ios下无效该怎么办?
The text was updated successfully, but these errors were encountered: