-webkit-overflow-scrolling 实现快速滚动和回弹

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

实现方式:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>scroll</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        header{
            background: #f00;
            color: #fff;
        }
        nav {
            width: 85%;
            height: 30px;
            line-height: 30px;
            white-space: nowrap;
            overflow: hidden;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
        }

        nav::-webkit-scrollbar {
            display: none;
        }

        nav a {
            display: inline-block;
            width: 50px;
            height: 30px;
        }
    </style>
</head>
<body>
<header>
    <nav>
        <a>菜单1</a>
        <a>菜单2</a>
        <a>菜单3</a>
        <a>菜单4</a>
        <a>菜单5</a>
        <a>菜单6</a>
        <a>菜单7</a>
        <a>菜单8</a>
        <a>菜单9</a>
        <a>菜单10</a>
    </nav>

</header>
</body>
</html>