现在很多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那行注释掉，就会发现滚动得很慢。

Mobile-H5网页快速滚动和回弹的更多相关文章

  1. 网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现

    现在很多for Mobile的H5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要加一行css代码即可: -webkit-overflow-scrol ...

  2. ios客户端快速滚动和回弹效果的实现

    现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要给容器加一行css代码即可 -webkit-overflow- ...

  3. Mobile的HTML5网页内快速滚动和回弹的效果

    style="overflow: auto;-webkit-overflow-scrolling: touch; 这个可以让页面在Native端滚动时模拟原生的弹性滚动效果 下面是微信浏览器 ...

  4. -webkit-overflow-scrolling : touch 快速滚动 回弹 效果

    现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要在元素上加一行css代码即可: -webkit-overflo ...

  5. 源生js惯性滚动与回弹效果

    在写移动端的APP或者页面时,经常会遇到惯性滚动与回弹效果.用插件iscroll可以轻松解决这个问题,大多数的移动框架也能轻松解决这个问题,它们内部都封装了这个效果. 一直好奇这个效果原生JS是怎么实 ...

  6. Android原生同步登录状态到H5网页避免二次登录

    本文解决的问题是目前流行的 Android/IOS 原生应用内嵌 WebView 网页时,原生与H5页面登录状态的同步. 大多数混合开发应用的登录都是在原生页面中,这就牵扯到一个问题,如何把登录状态传 ...

  7. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  8. IOS 支付宝、微信回调传值给H5网页

    这里用是的苹果原生和JS的交互 .有不明白JavaScriptCore框架的可以去网上搜索下这方面的资料很多废话不多说直接上代码 @protocol JSContextDelegate <JSE ...

  9. 【微信H5支付】微信公众号里H5网页点击调取微信支付

    最近在公众号里开发了下单支付H5网页,需要在H5里调用微信支付界面.开发思路和代码整理如下: todo...

随机推荐

  1. clientDataSet转换sql

    ReadMe 新版本delphi,可以用string类型,旧版本需要用widestring =========================================== function T ...

  2. Django（十六）基于模板的登录案例：登录装饰器、csrf攻击方式及防护、ajax的Post 的csrf开启写法、生成验证码、加验证码登录、反向解析+传参

    一.csrf攻击 1.1 csrf攻击(跨站请求伪造) [csrf攻击即]:通过第3方网站,伪造请求(前提条件是你已经登录正常网站,并保存了session或cookie登录信息且没有退出),第三方网站 ...

  3. 18 SQL优化

    1.SQL语句优化的一般步骤       1).了解各种SQL的执行频率         客户端连接成功后,可以通过SHOW [SESSION | GLOBAL] STATUS 命令来查看服务器状态信 ...

  4. JavaScript 环境污染

    定义全局变量有 3 种方式: 在任何函数体外直接使用 var 语句声明. var f = 'value1'; 直接添加属性到全局对象上.在 Web 浏览器中,全局作用域对象为 window. wind ...

  5. vue前端项目初始化的步骤

    前端项目初始化的步骤 1. 安装vue脚手架 2.通过vue脚手架创建项目 可以直接    vue create  项目名 也可以 vue ui 3.配置vue路由 4.配置Element-ui 组件 ...

  6. no-strings-attached-----攻防世界

    拿到题目到虚拟机里的查看一下 把这些十进制数字转换为16进制,然后利用python deocde 注意0 87这里需要舍弃

  7. 026、MySQL取字符串左边，取字符串右边，取字符串中间，取文本开始位置

    #取文本左边 ); #田 ); #田攀 ); #田攀5 #取文本右边 ); # ); # ); #攀52 #取文本中间 '); #田攀 '); #攀5 #从字符串s中获取s1的开始位置 不忘初心,如果 ...

  8. 015、MySQL取今天是第几季度，往后几个月是第几季度

    #取今天是第几季度 SELECT QUARTER( curdate( ) ); #取往后几个月是第几季度 , INTERVAL MONTH ) ); , INTERVAL MONTH ) ); , I ...

  9. NirSoft 实用程序

    64-bit (x64) utilities package 此软件包包含NirSoft中的所有实用程序,这些实用程序具有64位版本(x64)Windows的独立构建. 此程序包包含下面列表中每个实用 ...

  10. PHP计划任务

    server 2008:D:\SOFT_PHP_PACKAGE\php\php-cgi.exe -f D:\wwwroot\tlbuyuncom\wwwroot\Up_Data.phpPHP路径 -f ...