• Mobile-H5网页快速滚动和回弹


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

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

    <ul>5</ul

    <ul>5</ul

    <ul>5</ul

    <ul>5</ul

    <ul>5</ul

    <ul>5</ul

    <ul>5</ul

    <ul>5</ul

    </nav>  

    </div>  

    </body>  

    </html>  

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



    如果把-webkit-overflow-scrolling那行注释掉,就会发现滚动得很慢。

  • 相关阅读:
    Docker入门
    15个Docker基本命令及用法
    Docker系列
    docker
    Docker 常用命令
    查看用户列表在Linux
    Spring boot Mybatis
    CountDownLatch和CyclicBarrier 专题
    Spring Boot MyBatis 连接数据库
    Spring Boot MyBatis 通用Mapper插件集成 good
  • 原文地址:https://www.cnblogs.com/clj2017/p/8086116.html
Copyright © 2020-2023  润新知