本篇内容介绍了“分析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吸底时的滑动出现抖动的解决方案-创新互联
URL标题：
http://cdkjz.cn/article/dccscg.html
