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

要实现这个效果很简单,只需要加一行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>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>



你可能感兴趣的:(html,css,webapp)