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

最新推荐文章于 2022-08-29 14:54:18 发布

cc蒲公英

最新推荐文章于 2022-08-29 14:54:18 发布

阅读量1.6k

点赞数

分类专栏：移动端h5 文章标签： Safari WebKit overflow-scrolling 快速滚动回弹效果

移动端h5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

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

[css]view plaincopy 
   
 -webkit-overflow-scrolling : touch;  

可用以下网页测试：

[html]view plaincopy 
   
 <!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那行注释掉，就会发现滚动得很慢。

cc蒲公英

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现

现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。要实现这个效果很简单，只需要加一行css代码即可：[css] view plain copy -webkit-overflow-scrolling : touch; 可用以下网页测试：[
复制链接

扫一扫

专栏目录