前段时间做了一个浮层,但在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. ylb:SQL 表的高级查询-多表连接和子查询

    ylbtech-SQL Server: SQL Server-表的高级查询-多表连接和子查询 SQL Server 表的高级查询-多表连接和子查询. 1,ylb:表的高级查询-多表连接和子查询 返回顶 ...

  2. 网站添加ico图标

    打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的logo图标呢? 方法一(被动式): 制作一个ico格式 ...

  3. Neural Turing Machines-NTM系列(一)简述

    Neural Turing Machines-NTM系列(一)简述 NTM是一种使用Neural Network为基础来实现传统图灵机的理论计算模型.利用该模型.能够通过训练的方式让系统"学 ...

  4. 使用JDK中的类URL访问HDFS(来自吴超Hadoop)

    package hdfs; import java.io.InputStream; import java.net.URL; import org.apache.hadoop.fs.FsUrlStre ...

  5. js 解析json字符串

    server端返回的数据例如以下: {"list":[{"id":1,"name":"汉族"},{"id&qu ...

  6. mysql报错1872: Slave failed to initialize relay log info structure from the repository

    ERROR 1872 (HY000): Slave failed to initialize relay log info structure from the repository 在一台主机上增加 ...

  7. Flume-1-7-0用户手册

    介绍 概述 Apache Flume是为有效收集聚合和移动大量来自不同源到中心数据存储而设计的可分布,可靠的,可用的系统. Apache Flume的用途不仅限于日志数据聚合.由于数据源是可定制的,F ...

  8. CSU - 1556 Jerry&#39;s trouble(高速幂取模)

    [题目链接]:click here [题目大意]:计算x1^m+x2^m+..xn^m(1<=x1<=n)( 1 <= n < 1 000 000, 1 <= m < ...

  9. LinkedList 基本示例及源码解析

    目录 一.JavaDoc 简介 二.LinkedList 继承接口和实现类介绍 三.LinkedList 基本方法介绍 四.LinkedList 基本方法使用 五.LinkedList 内部结构以及基 ...

  10. SpringBoot启动流程分析(三):SpringApplication的run方法之prepareContext()方法

    SpringBoot系列文章简介 SpringBoot源码阅读辅助篇: Spring IoC容器与应用上下文的设计与实现 SpringBoot启动流程源码分析: SpringBoot启动流程分析(一) ...