从品牌网站建设到网络营销策划,从策略到执行的一站式服务
本篇内容介绍了“分析iOS中position:fixed吸底时的滑动出现抖动的解决方案”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联建站专注于云县企业网站建设,响应式网站建设,商城系统网站开发。云县网站建设公司,为云县等地区提供建站服务。全流程定制网站制作,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务
两种抖动
为什么抖动还会有两种?
其实是我碰到过两种抖动的场景,第一个场景是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吸底时的滑动出现抖动的解决方案”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图