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>  

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



如果把-webkit-overflow-scrolling那行注释掉,就会发现滚动得很慢。

原文地址:https://www.cnblogs.com/clj2017/p/8086116.html