分析iOS中position:fixed吸底时的滑动出现抖动的解决方案-创新互联

本篇内容介绍了“分析iOS中position:fixed吸底时的滑动出现抖动的解决方案”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联公司长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为高平企业提供专业的成都网站设计、网站建设，高平网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

两种抖动

为什么抖动还会有两种？

其实是我碰到过两种抖动的场景，第一个场景是native的抖动，第二个场景是h6的抖动。

native的抖动

前端开发人员会在app中打开webview，这个时候iOS中position:fixed吸底时的滑动出现抖动应该是native造成的抖动，整个viewport跟着动，所以可以在生成schema的时候将参数bounce_disable（可能不一定都有这个参数，就看有没有类似的参数进行控制）设置为1禁止native的弹性效果，然后加上h6的这个效果，-webkit-overflow-scrolling 属性可以帮我们实现这个效果，它控制元素在移动设备上是否使用滚动回弹效果。

h6的抖动

方案一

//我是吸顶头部.header{ width:100%; height:50px; position:fixed; top:0px;}//我是中间要滑动的部分.main{ width:100%; height:auto; position:absolute; padding-top:50px; padding-bottom:50px; box-sizing:border-box; overflow-y:scroll;}//我是吸底尾部.footer{ width:100%; height:50px; position:fixed; bottom:0px;}

解释：滑动部分overflow-y:scroll;所以在上下方向超出一屏的部分会变成滚动模式并且不溢出，然后这边吸顶和吸底设置的高度都是50，所以对应的中间滑动部分分别有padding-top:50px;和padding-bottom:50px;设置box-sizing:border-box;所以padding的增加不会增加.main的高度。

方案二

transform: translateZ(0);-webkit-transform: translateZ(0);

解释：在使用position:fixed的元素上加上该属性。

“分析iOS中position:fixed吸底时的滑动出现抖动的解决方案”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

网页名称：分析iOS中position:fixed吸底时的滑动出现抖动的解决方案-创新互联
文章路径：http://cdxtjz.cn/article/dccscg.html