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;
}
上一篇
下一篇