h5+ app开发 ios固定导航栏兼容问题

0x00 现象:

由于数据偏多,底部固定导航栏,在用户执行操作,ios系统手机弹出输入法框后,底部固定栏会随页面滚动而滑动;

0x01 原因:

设置的固定栏是相对于页面的定位,而内容的滚动也是在页面中实现,导致滚动是页面整体发生滚动导致;

0x02 解决方案:

设置页面高度100%,内容设置在content中滚动,添加 -webkit-overflow-scrolling: touch; /实现快速滚动和回弹的效果/

0x03 代码:

.Nscroll{
    position: absolute;     
    top: 0px;
    width: 100%;
    overflow: auto;
    height: 100%;
    overflow-y: scroll;     
     -webkit-overflow-scrolling: touch;   
    padding-bottom:60px;
}
上一篇
下一篇