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

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

作者: hsqin | 来源:发表于2021-11-06 15:26 被阅读0次

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


    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后 页面滑动后无法点击的问题

          本文链接:https://www.haomeiwen.com/subject/qsjjzltx.html