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

最新推荐文章于 2020-05-28 17:03:29 发布

xukung82

最新推荐文章于 2020-05-28 17:03:29 发布

阅读量598

点赞数 1

分类专栏：移动端开发 CSS

本文链接：https://blog.csdn.net/xukung82/article/details/50542681

版权

CSS 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

移动端开发

5 篇文章 0 订阅

订阅专栏

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>

xukung82

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
-webkit-overflow-scrolling 实现快速滚动和回弹

HTML5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。实现方式： <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> scroll
复制链接

扫一扫