<style type="text/css">
#scroller {
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
position: absolute;
width: 100%;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
@media all and (-webkit-transform-3d) {
#scroller {
overflow-y: scroll;
overflow-x: hidden;
}
}
</style>
2019.3.19更新:
昨晚突然被问iOS和Android navigation的适配方案。(因为iOS的webview上面有一个navigation bar,导致可视范围有一点偏差。)还好我之前写过这篇博客,代码留了下来了。回家后自己开了电脑,试了一下是可以的。这里贴上代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>YESHEN</title>
<style type="text/css">
body {
margin: 0px;
}
#title {
height: 50px;
background-color: blue;
line-height: 50px;
font-size: 30px;
color: white;
}
#scroller {
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
position: absolute;
width: 100%;
top: 50px;
bottom: 0px;
right: 0px;
left: 0px;
}
@media all and (-webkit-transform-3d) {
#scroller {
overflow-y: scroll;
overflow-x: hidden;
}
}
</style>
</head>
<body>
<div id="title">
2019
</div>
<div id="scroller">
<br/>.<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>.<br/>
</div>
</body>
</html>
预览效果大概是这样的