详解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的元素上加上该属性。

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

赞 (0)

相关推荐

  • IE6支持position:fixed完美解决方法

    今天去一老外站看到了这他站上的十分平滑但却没有js,好奇,原来..巧妙啊,分享下,相对而言比较节省资源.但效果好,使用方便,兼顾w3c.哈哈 复制代码 代码如下: <!-- compliance patch for microsoft browsers --> <!--[if lt IE 7]><link rel="stylesheet" href="ie-stuff.css" type="text/css" med

  • 详解IE6中的position：fixed问题与随滚动条滚动的效果

    详解IE6中的position：fixed问题与随滚动条滚动的效果

    详解IE6中的position:fixed问题与随滚动条滚动的效果 前言: 在<[jQuery]兼容IE6的滚动监听>(点击打开链接)提及到解决IE6fixed问题,具体是要引入一个js文件,还要声明一条脚本就为这个div声明fixed定位去解决,起始这样很不好啊.引入的Javascript不好管理之余,还要在head声明引入javascript,之后又要给这个div声明一个id,之后又要在脚本出弄一条声明,实在是烦死了. 使用position:fixed无非是想做出如下的效果. 基本上pos

  • CSS中position属性之fixed实现div居中

    CSS中position属性之fixed实现div居中

    position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 上下左右 居中 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即

  • 跨浏览器的实践:position:fixed 层的固定定位

    看示例吧: <style type="text/css"> body{ margin:0; padding:30px 0 0 0; } div#menu{ position:absolute; top:0; left:0; width:100%; height:30px; background-color:#ddd; } @media screen{ body>div#menu{ position:fixed; } } * html body{ overflow:hi

  • iphone safari不支持position fixed的解决方法

    需求是这样的,许多pc web页面的导航都是固定的,比如google的首页,现在要将这种固定的导航转移到mobile web下,很自然地就会想到position:fixed; bottom: 0,android下运行正常,但在iphone safari下就会出现问题,当滚动条滚动时,导航条就会出现屏幕的上方,黑乎乎的一块,很不协调.许多人推荐iscroll.jquery mobile等框架,但有时效果不如意或是得阅读框架源码进行二次开发,会花费好长一段时间的.经过一段时间的研究,找到了一种解决办

  • 使用CSS样式position:fixed水平滚动的方法

    使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置.position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了.有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute).本文提供一个解决方法,附jquery扩展源码. 本文的实现方式是使用js来控制div块随滚动条水平滚动,原理就是当window对象发生scrol

  • js完美解决IE6不支持position:fixed的bug

    先来看段代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #

  • ie6,ie7,ie8完美支持position:fixed的终极解决方案

    ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动:以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并不会闪烁. 复制代码 代码如下: <div id="goTop_div" class="fixed ie">  </div> css: 复制代码 代码如下: .fixed{         positio

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

    两种抖动 为什么抖动还会有两种? 其实是我碰到过两种抖动的场景,第一个场景是native的抖动,第二个场景是h5的抖动. native的抖动 前端开发人员会在app中打开webview,这个时候iOS中position:fixed吸底时的滑动出现抖动应该是native造成的抖动,整个viewport跟着动,所以可以在生成schema的时候将参数bounce_disable(可能不一定都有这个参数,就看有没有类似的参数进行控制)设置为1禁止native的弹性效果,然后加上h5的这个效果,-webk

  • 详解IOS中文件路径判断是文件还是文件夹

    详解IOS中文件路径判断是文件还是文件夹 方法1 + (BOOL)isDirectory:(NSString *)filePath { BOOL isDirectory = NO; [[NSFileManager defaultManager] fileExistsAtPath:filePath isDirectory:&isDirectory]; return isDirectory; } 方法2 + (BOOL)isDirectory:(NSString *)filePath { NSNum

  • 详解iOS中集成ijkplayer视频直播框架

    详解iOS中集成ijkplayer视频直播框架

    ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijkplayer, 即便以前从没有接触过, 按着下面做也可以集成成功! 一. 下载ijkplayer ijkplayer下载地址: http://xiazai.jb51.net/201612/yuanma/ijkplayer-master_jb51.rar 下载完成后解压, 解压后文件夹内部目录如下图:

  • 详解iOS中按钮点击事件处理方式

    详解iOS中按钮点击事件处理方式

    写在前面 在iOS开发中,时常会用到按钮,通过按钮的点击来完成界面的跳转等功能.按钮事件的实现方式有多种,其中较为常用的是目标-动作对模式.但这种方式使得view与controller之间的耦合程度较高,不推荐使用: 另一种方式是代理方式,按钮的事件在view中绑定,controller作为view的代理实现代理方法. 目标-动作对实现方式 具体来说,假设我们有一个包含一个Button的veiw,view将Button放在头文件中,以便外部访问.然后controller将view作为自己的vie

  • 详解ios中的SQL数据库文件加密 (使用sqlcipher)

    详解ios中的SQL数据库文件加密 (使用sqlcipher)

    今天本想写一片 GAE+goAgent+SwitchySharp 的指南的!但是突然翻出了前段时间写的关于iOS中的SQL数据库文件加密的代码,于是乎决定今天就先讲讲这个!- 那么goAgent将放在周末,后续的文章中除了文件加密,还有传输数据加密,感兴趣的童鞋 敬请留意. 言归正传,sql的文件加密,我们首先要用到一个库,它就是大名鼎鼎的Sqlcipher,  奉上连接:http://sqlcipher.NET,在ios里 我们需要看的文档是这一篇http://sqlcipher.Net/io

  • 详解iOS中Button按钮的状态和点击事件

    详解iOS中Button按钮的状态和点击事件

    一.按钮的状态 1.UIControlStateNormal 1> 除开UIControlStateHighlighted.UIControlStateDisabled.UIControlStateSelected以外的其他情况,都是normal状态 2> 这种状态下的按钮[可以]接收点击事件 2.UIControlStateHighlighted 1> [当按住按钮不松开]或者[highlighted = YES]时就能达到这种状态 2> 这种状态下的按钮[可以]接收点击事件 3

  • 详解IOS中GCD的使用

    Grand Central Dispatch(GCD)是异步执行任务的技术之一.一般将应用程序中记述的线程管理用的代码在系统级中实现.开发者只需要定义想执行的任务并追加到适当的Dispatch Queue中,GCD就能生成必要的线程并计划执行任务.由于线程管理是作为系统的一部分来实现的,因此可统一管理,也可执行任务,这样就比以前的线程更有效率. 1. GCD是苹果公司为多核的并行运算提出的解决方案 GCD会自动利用更多的CPU内核(比如双核.四核) GCD会自动管理线程的生命周期(创建线程.调度

  • 详解IOS中Tool Bar切换视图方法

    详解IOS中Tool Bar切换视图方法

    本文通过实例给大家详细讲解了IOS开发中Tool Bar切换视图方法以及原理解释,希望我们的整理对你有用,一起学习下. iOS中几种典型的多视图程序: (1)Tab Bar Application:程序的底部有一排按钮,轻触其中一个按钮,相应的视图被激活并显示出来: (2)Navigation-Based Application:其特点是使用navigation controller,而navigation controller使用navigation bar来控制多级视图: (3)Tool B

  • 详解iOS中UIView的layoutSubviews子视图布局方法使用

    详解iOS中UIView的layoutSubviews子视图布局方法使用

    概念 在UIView里面有一个方法layoutSubviews: 复制代码 代码如下: - (void)layoutSubviews;    // override point. called by layoutIfNeeded automatically. As of iOS 6.0, when constraints-based layout is used the base implementation applies the constraints-based layout, other

  • 详解IOS中如何实现瀑布流效果

    详解IOS中如何实现瀑布流效果

    首先是效果演示 特点:可以自由设置瀑布流的总列数(效果演示为2列) 虽然iphone手机的系统相册没有使用这种布局效果,瀑布流依然是一种很常见的布局方式!!!下面来详细介绍如何实现这种布局. 首先使用的类是UICollectionView 我们要做的是自定义UICollectionViewCell和UICollectionViewLayout 1.自定义UICollectionViewCell类,只需要一个UIImageView即可,frame占满整个cell. 2.重点是自定义UICollec

随机推荐