Mobile-H5网页快速滚动和回弹

现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼。

要实现这个效果很简单,只需要加一行css代码即可:

-webkit-overflow-scrolling : touch;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta charset="utf-8" />

<title>scroll</title>

<style type="text/css">

.container {

width : 300px;

height : 50%;

-webkit-box-sizing : border-box;

position : relative;

overflow-y : auto;

background-color : cyan;

-webkit-overflow-scrolling : touch;  /* liuhx:可以把这整行注释掉对比差别 */

}

ul {

height: 50px;

}

</style>

</head>

<body>

<div align="center">

<nav class="container">

<ul>1</ul>

<ul>2</ul>

<ul>3</ul>

<ul>4</ul>

<ul>5</ul>

<ul>5</ul>

<ul>5</ul>

<ul>5</ul>

<ul>5</ul>

<ul>5</ul>

<ul>5</ul>

<ul>5</ul>

<ul>5</ul>

<ul>5</ul>

</nav>

</div>

</body>

</html>

可以用手指滑动中间的蓝色区域,会发现回弹效果以及滚动得很快:

Mobile-H5网页快速滚动和回弹
Mobile-H5网页快速滚动和回弹
如果把-webkit-overflow-scrolling那行注释掉,就会发现滚动得很慢。

上一篇:if(男深圳集体户口&&女非深圳户口)深圳准生证办理材料及流程


下一篇:常用Java API之Ramdom--用代码模拟猜数小游戏