解决iOS 底部fixed后 页面滑动后无法点击的问题

移动端常见的页面结构(上下固定,中间可滑动):


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添加惯性滑动
   

你可能感兴趣的:(解决iOS 底部fixed后 页面滑动后无法点击的问题)