详解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; }
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:详解iOS中position:fixed吸底时的滑动出现抖动的解决方案-创新互联
网页路径:http://scyanting.com/article/csedgd.html