IOS中部分浏览器下fixed定位失效

2019-01-25  本文已影响0人  韩小强

参考过网上一些解决定位失效的案例,都没有完美的解决现在的需求

使用传统定位布局,内容中含有表单,在移动端input会触发软键盘弹出,这时滑动页面会发现头部和尾部没有固定住,而是随着页面移动,也就是相当于转化玮absolute。

<!--- 头部固定-->
div id="header">iScroll</div>
<!--内容滚动-->
<div id="wrapper">
  <div id="scroller">
      <ul>
          <li><input type="text"></li>
          <li><select><option>option</option></select></li>
      </ul>
  </div>
</div>
<!--底部固定-->
<div id="footer"></div>
//css
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
}
header{
   width:100%;
   height:40px;
   background:red;
}
.contain{
   position:absolute;
   top:40px;
   left:0;
   right:0;
   bottom:50px;
   background:pink;
   overflow-y:auto;
      /* 增加该属性,可以增加弹性 */
   -webkit-overflow-scrolling: touch;
}
.main{
   height:3000px;
}
footer{
      width: 100%;
   height: 50px;
   background: #ccc;
   position: absolute;
       bottom: 0px;
}

有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 scrollIntoView 进行修复。
其他方法还在整理中,目前被多个input框来回切换时头部乱跳困扰,还在排查原因中。。。

上一篇 下一篇

猜你喜欢

热点阅读