脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → iOS position:fixed吸底滑动抖动

详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

 更新时间：2018年12月24日 14:14:05   作者：月光下的小风铃  
这篇文章主要介绍了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

两种抖动

为什么抖动还会有两种？

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

native的抖动

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

h5的抖动

方案一

//我是吸顶头部
.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实现MJRefresh下拉刷新（上拉加载）使用详解

    iOS实现MJRefresh下拉刷新（上拉加载）使用详解

    本篇文章主要介绍了iOS实现MJRefresh下拉刷新（上拉加载）使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • Objective-C中的语法糖示例详解

    Objective-C中的语法糖示例详解

    开发过程中我特别喜欢用语法糖,原因很简单,懒得看到一堆长长的代码，但语法糖简单却不那么简单，下面这篇文章主要给大家介绍了关于Objective-C中语法糖的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2018-01-01
  • iOS开发中多线程的安全隐患总结

    iOS开发中多线程的安全隐患总结

    在本篇文章中小编给大家整理了关于iOS开发中多线程的安全隐患的知识点，需要的朋友们学习参考下。
    2019-07-07
  • 详解iOS应用开发中使用设计模式中的抽象工厂模式

    详解iOS应用开发中使用设计模式中的抽象工厂模式

    这篇文章主要介绍了iOS应用开发中使用设计模式中的抽象工厂模式,示例代码为传统的Objective-C,需要的朋友可以参考下
    2016-03-03
  • Unity iOS混合开发界面切换思路解析

    Unity iOS混合开发界面切换思路解析

    这篇文章主要介绍了Unity iOS混合开发界面切换思路解析的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-09-09
  • IOS开发之路--C语言指针

    IOS开发之路--C语言指针

    指针是C语言的精髓，但是很多初学者往往对于指针的概念并不深刻，以至于学完之后随着时间的推移越来越模糊，感觉指针难以掌握，本文通过简单的例子试图将指针解释清楚
    2014-08-08
  • iOS开发中一些手写控件及其相关属性的使用

    iOS开发中一些手写控件及其相关属性的使用

    这篇文章主要介绍了iOS开发中一些手写控件及其相关属性的使用,代码基于传统的Objective-C,需要的朋友可以参考下
    2015-12-12
  • 举例详解iOS开发过程中的沙盒机制与文件

    举例详解iOS开发过程中的沙盒机制与文件

    这篇文章主要介绍了举例详解iOS开发过程中的沙盒机制与文件,示例代码为传统的Obejective-C,需要的朋友可以参考下
    2015-09-09
  • 详解如何使用ReactiveObjC

    详解如何使用ReactiveObjC

    RAC 指的就是 RactiveCocoa ，是 Github 的一个开源框架，能够通过信号提供大量方便的事件处理方案，让我们更简单粗暴地去处理事件，现在分为 ReactiveObjC（OC） 和 ReactiveSwift（swift）。本文将详细介绍如何使用ReactiveObjC。
    2021-06-06
  • 如何利用iCloud Drive同步Xcode配置详解

    如何利用iCloud Drive同步Xcode配置详解

    这篇文章主要给大家介绍了关于如何利用iCloud Drive同步Xcode配置的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2018-05-05

最新评论