前段时间做了一个浮层,但在ios上,浮层滑动不流畅,基本上是随着手指的移动而移动,经研究加上-webkit-overflow-scrolling: touch即可

eg:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="尚德机构"/>
<meta name="description" content="尚德机构"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="generator" content="bd-mobcard"/>
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title></title>
<style type="text/css">
#a {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
font-size: 20px;
white-space: pre;
background: lightgoldenrodyellow;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#b { }
</style>
</head>
<body>
<div id="a">
<div id="b">
1
1
1
1
11 1
1
1
11 1
11
1
1 11
1 1
1
1
11
1 11
11
111111 1
1
1
1
1
1
1
1
1
1
1
1
</div>
</div>
</body>
</html>

本质上,此属性创建了带有硬件加速的系统级控件,使元素能快速滑动和回弹,同时也会消耗更多的内存。

ios浮层滑动不流畅解决方案的更多相关文章

  1. 解决overflow: auto在Ios中滑动不流畅

    [bug]—— H5页面在 ios 端滑动不流畅的问题   IOS系统的惯性滑动效果非常6,但是当我们对div加overflow-y:auto;后是不会出这个效果的,滑动的时候会感觉很生涩.怎么办? ...

  2. 【bug】—— H5页面在 ios 端滑动不流畅的问题

    IOS系统的惯性滑动效果非常6,但是当我们对div加overflow-y:auto;后是不会出这个效果的,滑动的时候会感觉很生涩.怎么办? 方案一: 在滚动容器内加-webkit-overflow-s ...

  3. 解决iPhone滑动不流畅问题

    前段时间在做一个手机端的页面时遇到了iOS上滑动不流畅的问题,后来才发现安卓上没有问题,才意识到这是兼容性问题引起的,所以遇到问题后快速定位到问题根源非常重要.在网上一搜就找到了解决方案.以后遇到类似 ...

  4. IOS的H5页面滑动不流畅的问题:

    IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK

  5. iOS开发——加载、滑动翻阅大量图片解决方案详解

    加载.滑动翻阅大量图片解决方案详解     今天分享一下私人相册中,读取加载.滑动翻阅大量图片解决方案,我想强调的是,编程思想无关乎平台限制. 我要详细说一下,在缩略图界面点击任意小缩略图后,进入高清 ...

  6. 类似IOS的滑动返回上一级,SwipeBackLayout-android的滑动返回类库

    最近,公司在开发App的需求中增加了一个新的需求,要在android的页面中增加向右滑动的时候返回上一级页面.我刚知道这个需求的时候,感觉有点坑,可能设计那边最近接触到知乎的客户端或者是IOS的滑动可 ...

  7. 【解决ViewPager在大屏上滑动不流畅】 设置ViewPager滑动翻页距离

    在项目中做了一个ViewPager+Fragment滑动翻页的效果,在模拟器和小米手机上测试也比较正常.但是换到4.7以上屏幕测试的时候发现老是滑动失效. 因为系统默认的滑动策略是当用户滑动超过半屏之 ...

  8. [iOS]终极横竖屏切换解决方案

    [iOS]终极横竖屏切换解决方案 大家的项目都是只支持竖屏的吧?大多数朋友(这其中当然也包括博主),都没有做过横屏开发,这次项目刚好有这个需求,因此把横竖屏相关的心得写成一遍文章供诸位参考. 01.综 ...

  9. 李氏滑动事件冲突解决方案 之 处理子ViewGroup的超棒方案

    父ViewGroup(CurView) 和 子 ViewGroup(ParentView) 滑动事件冲突解决方案 之 处理子ViewGroup的超棒方案: 子ViewGroup 以 SlipRelat ...

随机推荐

  1. 实现页面切换(动画效果实现,不用ViewPager)

    源代码地址 http://download.csdn.net/detail/u013210620/8791687 先看主页面布局activity_main <?xml version=" ...

  2. OpenSceneGraph-3.3.3

    OpenSceneGraph-3.3.3, [/b]released on 19th December 2014, key deliverables in this dev release are: ...

  3. MapWindowPoints

    中文名 MapWindowPoints Windows CE 1.0及以上版本 头文件 winuser.h 库文件 user32.lib MapWindowPoints函数把相对于一个窗口的坐标空间的 ...

  4. Drools的HelloWord例子

    添加drools框架运行的依赖 <!--Drools 规则相关 --> <dependency> <groupId>org.drools</groupId&g ...

  5. CentOS6.5环境配置笔记

    CentOS6.5环境配置笔记 一.概述 服务器系统重装,配置应用运行环境 CentOS6.5 x64 二.修改密码 重新设置登录密码 $passwd 或 $passwd root 三.配置端口号及防 ...

  6. 2016.6.20 maven下载与安装步骤

    (1)进入maven官网的下载页面. https://maven.apache.org/download.cgi (2)下载页面中可以看到很多可供下载的链接.gz和zip只是压缩方式的区别,这两个都是 ...

  7. &lt;LeetCode OJ&gt; 189. Rotate Array

    189. Rotate Array Total Accepted: 55073 Total Submissions: 278176 Difficulty: Easy Rotate an array o ...

  8. Node.js学习笔记(3)——关于回调函数和函数的回调

    说明:本人是node.js的初学者,尝试向别人解释这是怎么回事是自我学习的一个好方法.如果你发现有些地方并不是那么正确,欢迎提出来让我知道以便修正,共同进步,谢过^_^.       欢迎交流,本人微 ...

  9. WinForm搭载ScintillaNET时文本由于发生偏移被隐藏解决方案

    项目用ScintillaNet搭载到WinForm以满足文本编辑的需求,在用FindReplace.Scintilla.Text=“显示内容”输出文本内容的时候会碰到文本被WinForm边框隐藏的情况 ...

  10. java 方法重写原则

    方法重写应遵循“三同一小一大”原则: “三同”:即方法名相同,形参列表相同,返回值类型相同: “一小”:子类方法声明抛出的异常比父类方法声明抛出的异常更小或者相等: “一大”:子类方法的访问修饰符应比 ...