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;
}