移动端常见的页面结构(上下固定,中间可滑动):
image.png
实现方式:
- 上下使用position:fixed结构
- 中间用
padding:200px 0 60px
来实现上下部分不遮挡中间的文案(具体间距根据自己页面来调整)
遇到问题:
iOS系统下,底部按钮有时无法点击,滑动中间区域后,底部按钮有时可点有时不可点
原因:
ios webkit 渲染和绘制不同步导致的(具体百度去吧,主要就是Safari浏览器兼容问题)
解决方法:
中间区域也使用 position:fixed;
,eg:
position: fixed;
left: 0;
top: 200px; //距离上面的间距
right: 0;
bottom: 60px; //一般是底部fixed区域的高度
overflow-y: auto;
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch; //ios添加惯性滑动
网友评论