现在很多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. 前端学习笔记系列一：9 js中数组的拷贝

    拷贝分为浅拷贝和深拷贝,在JavaScript中能够实现这两种拷贝的方式也是多种多样.以下是一维数组实现深拷贝和浅拷贝的各种方式. 一.浅拷贝 1.赋值 赋值是最直接的一种浅拷贝. let arr3 ...

  2. Redis使用守护进程启动sentinel并指定其日志目录

    正常redis-server可以通过配置文件来指定守护进程启动以及指定日志路径,但sentinel就不一样了.正常启动redis的sentinel时,进程会直接在前台跑,一退出sentinel进程就关 ...

  3. Nginx反向代理实现负载均衡配置图解

    Nginx反向代理实现负载均衡配置图解 [导读] 负载均衡配置是超大型机器需要考虑的一些问题,同时也是数据安全的一种做法,下面我来介绍在nginx中反向代理 负载均衡配置图解,大家可参考本文章来操作. ...

  4. 使用Go语言一段时间的感受

    作者 openkk 2012-03-04 18:26:58 文/Windstorm 有一段时间没更新了.最近在忙一个 Server+Client 的项目,Client 是 Android 手机,大概也 ...

  5. 【QSBOJ】组成三位数

    题目描述 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数构成1:2:3的比例,试求出所有满足条件的三个三位数. 例如:三个三位数192,384,576满足以上条件. 输出 输出 ...

  6. ffmpeg 学习：000-概述和库的组成

    背景 ffmpeg bin工具 可能无法满足产品的使用,于是需要通过传参调用ffmpeg库,即在通过更底层的方式使用它. FFmpeg 介绍 FFmpeg是领先的多媒体框架,能够解码,编码,转码,复用 ...

  7. 小程序列表循环出来的list是不同接口赋的值

    需求:首页有三个列表,样式形式都是一样的,可以循环展示,但是循环的内容list部分是来自于不同的三个接口. data: { indexList:[{ name: "中考体能突击营" ...

  8. Timetable CodeForces - 946D （预处理+背包）

    题意:n天m节课,最多可以逃k节课,每天在学校待的时间为该天上的第一节课到最后一节课持续的时间.问怎样逃课可以使这n天在学校待的时间最短,输出最短的时间. 分析: 1.预处理出每天逃j节课时在学校待的 ...

  9. Windows环境下的32位汇编语言程序设计

    一个逆向的告诉我可以尝试学一下8086处理器,再回头看一看自己学过的会有提高学呗,8086处理器怎么学....然后就学了8086的汇编, 好友就分享了琢石成器——Windows环境下的32汇编语言设计 ...

  10. Day6-T2

    原题目 给你一个长度为n的序列A,请求出最大的一对数(Ai ,Aj),使Ai&Aj最大. 第一行为n,接下来n行,每一个数表示Ai. 输出最大的“and”. S1: Input: Output ...