详解iOS中位置:固定吸底时的滑动出现抖动的解决方案 - 行业资讯

<强>两种抖动
　　

为什么抖动还会有两种?

其实是我碰到过两种抖动的场景,第一个场景是本机的抖动,第二个场景是仅有的抖动。

<强>本地的抖动
　　

前端开发人员会在应用程序中打开webview,这个时候iOS中位置:固定吸底时的滑动出现抖动应该是本土造成的抖动,整个视窗跟着动,所以可以在生成模式的时候将参数bounce_disable(可能不一定都有这个参数,就看有没有类似的参数进行控制)设置为1禁止原生的弹性效果,然后加上仅有的这个效果,-webkit-overflow-scrolling属性可以帮我们实现这个效果,它控制元素在移动设备上是否使用滚动回弹效果。

<强>编辑的抖动
　　

方案一
　　

　　　　//我是吸顶头部　　.header { 　　宽度:100%; 　　高度:50 px; 　　位置:固定; 　　上图:0 px; 　　}//我是中间要滑动的部分　　.main { 　　宽度:100%; 　　高度:汽车; 　　位置:绝对的; 　　padding-top: 50 px; 　　padding-bottom: 50 px; 　　box-sizing: border-box; 　　overflow-y:滚动; 　　}//我是吸底尾部　　.footer { 　　宽度:100%; 　　高度:50 px; 　　位置:固定; 　　底部:0 px; 　　} 　　之前　　　　

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

方案二
　　

　　　　　　变换:translateZ (0); 　　-webkit-transform: translateZ (0); 　　之前　　　　

解释:在使用位置:固定的元素上加上该属性。
　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。