现在很多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那行注释掉,就会发现滚动得很慢。

相关文章:

  • 2022-01-20
  • 2022-01-11
  • 2022-12-23
  • 2022-12-23
  • 2021-07-11
  • 2021-12-27
  • 2021-09-15
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-10-29
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案