现在很多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. PhoneGap简易配置使用

    在Android Studio 里新一下Android项目, 这个不用说了. 链接: https://pan.baidu.com/s/1qYcCBEW 密码: ymhh 添加 cordovaapp-c ...

  2. Notepad2&Notepad++

    写在前面 几个礼拜前电脑自带的记事本抽风,打开文本后台有进程但就是不显示界面,网上搜的教程无非是重装.杀毒.换包;这些操作要不就是太繁琐要不就是没效果,于是乎我物色了两款十分强大且轻量的开源记事本No ...

  3. UVA 1601 双向BFS

    但是我们还不是很清楚每一次的状态怎么储存?我们可以用一个结构体,将每次的位置存起来,但是这个程序中用了一个更好的储存方法:我们知道最大的格数是16*16个,也就是256个,那么我们转换为二进制表示就是 ...

  4. 关于torchvision.models中VGG的笔记

    VGG 主要有两种结构,分别是 VGG16 和 VGG19,两者并没有本质上的区别,只是网络深度不一样. 对于给定的感受野,采用堆积的小卷积核是优于采用大的卷积核的,因为多层非线性层可以增加网络深度来 ...

  5. 51nod 1352：集合计数

    1352 集合计数 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 给出N个固定集合{1,N},{2,N-1},{3,N-2},...,{N-1,2 ...

  6. mvn 编译报错mavn sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested targ

    mavn 编译报错: mavn sun.security.validator.ValidatorException: PKIX path building failed: sun.security.p ...

  7. .Net 笔记

    1.介绍 .net一般指.Net Framework框架.一种平台,一种技术. C#是一种编程语言,可以开发基于.net平台的应用. .Net Framework是框架是.Net平台不可缺少的一部分, ...

  8. Day4-T1

    原题目 Hades 与 Dionysus 在狂饮后玩起了多米诺骨牌的小游戏. 现在桌上有 N 块多米诺骨牌,每块多米诺骨牌上半部分和下半部分上都有一个整数.每次翻转可让 一块多米诺骨牌上下翻转,即上下 ...

  9. 提交作业 C语言I作业11

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 http://edu.cnblogs.com/campus/zswxy/SE2019-2/homework/10127 我在这个课程的目标 ...

  10. 042-PHP使用闭包函数递归无限级分类

    <?php //使用闭包函数递归无限级分类 function demo($array){ # 用于存储递归后的队列 $data = []; # 递归函数 $func = function (&a ...