zoukankan      html  css  js  c++  java
  • 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那行注释掉,就会发现滚动得很慢。

  • 相关阅读:
    ASP.NET(C#)图片加文字、图片水印
    CMake构建Visual Studio中MFC项目的Unicode问题
    用Visual Studio 2008(VS)编译WebKit的r63513
    此时学习中
    ASP.NET进阶——初学者的提高(长期)
    继续努力
    程序员阿士顿的故事
    iOS 深拷贝和浅拷贝
    Javascript中this的取值
    Lisp的本质(The Nature of Lisp)
  • 原文地址:https://www.cnblogs.com/clj2017/p/8086116.html
Copyright © 2011-2022 走看看