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

来源：互联网发布：新网域名转入万网编辑：程序博客网时间：2024/05/21 18:45

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

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

[css] view plain copy
 
-webkit-overflow-scrolling : touch;  

可用以下网页测试：

[html] view plain copy
 
<!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>6</ul>  
            <ul>7</ul>  
            <ul>8</ul>  
            <ul>9</ul>  
            <ul>10</ul>  
            <ul>11</ul>  
            <ul>12</ul>  
            <ul>13</ul>  
            <ul>14</ul>  
            <ul>15</ul>  
            <ul>16</ul>  
            <ul>17</ul>  
            <ul>18</ul>  
            <ul>19</ul>  
            <ul>20</ul>  
        </nav>  
    </div>  
</body>  
</html>  

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

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

0 0