前段时间做了一个浮层,但在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>

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

05-12 07:34