ios移动端fixed定位元素在滑动页面时上下抖动的解决方案

根据实际代码，对比以下三种情况进行调整

目录

一、滚动元素不要包含fixed元素。

二、滚动元素设置absolute定位。

三、fixed定位元素增加transform样式。

---

一、滚动元素不要包含fixed元素。

    
fixed固定元素
    
滚动内容




    

        
fixed固定元素
        
滚动内容
    

二、滚动元素设置absolute定位。

.header {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0px;
}

.main {
    width: 100%;
    height: auto;
    position: absolute;
    box-sizing: border-box;
    overflow-y: scroll;
}

三、fixed定位元素增加transform样式。

.header {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

注：在添加transform样式后发现fixed定位元素上边有1px缝隙，暂时没有找到原因，通过设置top：-1px；临时解决。

 参考文章：https://www.jb51.net/article/153342.htm

https://www.cnblogs.com/ranyonsue/p/14069643.html