网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现

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

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

[css]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. -webkit-overflow-scrolling : touch;  
可用以下网页测试:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>scroll</title>  
  6.         <style type="text/css">  
  7.             .container {  
  8.                 width : 300px;  
  9.                 height : 50%;  
  10.                 -webkit-box-sizing : border-box;  
  11.                 position : relative;  
  12.                 overflow-y : auto;  
  13.                 background-color : cyan;  
  14.                 -webkit-overflow-scrolling : touch;  /* liuhx:可以把这整行注释掉对比差别 */  
  15.             }  
  16.             ul {  
  17.                 height: 50px;  
  18.             }  
  19.         </style>  
  20.     </head>  
  21. <body>  
  22.     <div align="center">  
  23.         <nav class="container">  
  24.             <ul>1</ul>  
  25.             <ul>2</ul>  
  26.             <ul>3</ul>  
  27.             <ul>4</ul>  
  28.             <ul>5</ul>  
  29.             <ul>6</ul>  
  30.             <ul>7</ul>  
  31.             <ul>8</ul>  
  32.             <ul>9</ul>  
  33.             <ul>10</ul>  
  34.             <ul>11</ul>  
  35.             <ul>12</ul>  
  36.             <ul>13</ul>  
  37.             <ul>14</ul>  
  38.             <ul>15</ul>  
  39.             <ul>16</ul>  
  40.             <ul>17</ul>  
  41.             <ul>18</ul>  
  42.             <ul>19</ul>  
  43.             <ul>20</ul>  
  44.         </nav>  
  45.     </div>  
  46. </body>  
  47. </html>  
可以用手指滑动中间的蓝色区域,会发现回弹效果以及滚动得很快:


(点击图片查看大图)
如果把-webkit-overflow-scrolling那行注释掉,就会发现滚动得很慢。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值