现在很多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. PHP几个快速读取大文件例子

    PHP几个快速读取大文件例子 感谢 把我给崩了 的投递 时间:2014-10-16 来源:三联 在PHP中,对于文件的读取时,最快捷的方式莫过于使用一些诸如file.file_get_contents ...

  2. postgres 删除外部表

    drop external table if exists tableName;

  3. pip install .whl文件时is not a supported wheel on this platform.解决方法

     首先,在python中输入import pip和print(pip.pep425tags.get_supported()),从而获取pip支持的文件名和版本. somnus@somnus-HP-Pa ...

  4. Ubuntu 19.10将使用GCC 9作为默认编译器

    作为我们这一周期一直期待的变化,Ubuntu 19.10升级到GCC 9作为GCC 8的默认系统编译器. Ubuntu 19.10(和Ubuntu 20.04 LTS)将使用GCC 9 stable作 ...

  5. 201707《Ruby元编程》

    元编程不过是编程--经典必读 作用域(绑定) 打破作用域门的方式 对象模型图 七条规则 法术手册 作用域(绑定) 改变作用域的关键字, 分别是module,class和def.我们称为作用域的门(sc ...

  6. helloctf.exe ----攻防世界

    下载附件之后,查壳发现没有壳,运行试试看 很平常的输入代码,然后ida查看一下,开始就发现一个注意的地方,但是还是继续向下看, 结果就是CrackMeJustForFun

  7. db.mysql.主从同步实验

    实验环境:windows10(1607).mysql5.7.16  (for windows zip) 主库(端口3306)配置文件: [mysqld] #数据库根目录 basedir = D:\my ...

  8. Java笔记--基础

    1.Java中内存的基本结构: 栈(stack):存放局部变量.对象的引用: 堆(heap):new出来的东西(对象) 方法区:常量池等 静态域:全局变量等 变量在其生命周期结束后将出栈,此时堆中的空 ...

  9. Metasploit学习笔记——情报搜集技术（只记录与metasploit有关的）

    1.外围信息搜集 1.1whois域名注册信息查询 示例代码如下 msf > whois testfire.net 1.2网站的目录结构 示例代码如下 msf > use auxiliar ...

  10. ​IntelliJ IDEA使用技巧—使用EasyCode插件一键生成代码04期

    在现如今的软件开发过程中,软件开发人员将很多的精力放在重复的编码中.特别是流行的MVC架构模式下,项目各个层次的功能更加独立,这也间接的造成了代码的相似度更高.因此需要寻找一种可以减少软件开发人员重复 ...