一、背景
本文主要讲述一些作者自己在H5开发过程中遇到的问题以及解决方案,希望对同行朋友在开发过程中有所帮助。
二、问题
1.问题1:
移动端滚动悬浮抖动问题
移动端开发过程中,需要对例如表格头部(假设需滚动悬浮dom元素为A,其他内容为B)采取滚动时置顶,当页面高度处于临界点时(即A+B刚好出现滚动条,纯B则无滚动条),A滚动到了顶部置顶,此时内容不需要滚动条,A立马处于非置顶状态。
原因分析:
当表格滚动到顶部时候,根据条件判断(通常是元素距离顶部的距离取去判断是否该悬浮置顶fixed)将头部置顶,A由于设置了position:fixed导致A脱离了原文档流,这导致A的父级容器的高度变小,原内容刚好出现滚动条,缺少A,页面无需滚动条,这导致A直接回弹,此时继续滚动,则A会一直处于悬浮和非悬浮来回切换,不停抖动。
解决方案:
当元素悬浮时,元素将脱离文档流,此时将父级容器A的区域进行等高度填充(padding或元素填充),即可解决问题。
2.问题2:
fixed定位设置了z-index但是无效
原因分析:
其他元素css设置了transform: translateZ(1px) 导致fixed的层级始终无法变成最高;