现在很多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. 车林通购车之家--购车计算器模块--算法js

    //CarCalculator.js var checkedClass = "jsq-item-check jsq-item-checked"; var uncheckedClas ...

  2. 开通博客第一天 写一个hello world

    申请的博客第一天便被批准了,有了一个和大家交流学习的园地.在今后的日子里期待一起进步.

  3. C# 篇基础知识4——.NET的基础概念

    C#语言是与微软的.NET框架紧密地联系在一起的,而.NET框架是微软.NET战略的核心,为了更好的理解C#语言,我们必须了解一些.NET框架的基本知识..NET框架是为开发应用程序推出的一个编程平台 ...

  4. SciPy 插值

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  5. MySQL 如何使用 PV 和 PVC？【转】

    本节演示如何为 MySQL 数据库提供持久化存储,步骤为: 创建 PV 和 PVC. 部署 MySQL. 向 MySQL 添加数据. 模拟节点宕机故障,Kubernetes 将 MySQL 自动迁移到 ...

  6. Android的事件处理机制之基于回调的事件处理

    回调机制 如果说事件监听机制是一种委托式的事件处理,那么回调机制则与之相反,对于基于回调的事件处理模型来说,事件源与事件监听器是统一的,换种方法说事件监听器完全消失了,当用户在GUI组件上激发某个事件 ...

  7. windows清理命令

    总是有一些设备需要清理,第三方的软件有不可以安装,那么,就需要这两条命令来做: cleanmgr /sageset:99 #设置要被清理的东西 cleanmgr /sagerun:99 #执行清理操作 ...

  8. vue的MVVM

    Vue的相关知识有 字符串模板 MVVM 虚拟dom和domdiff,查看下一篇笔记 字符串模板 function render(template, data) { const reg = /\{\{ ...

  9. 神奇的i++

    神奇的i++ i++,++i,多简单啊,不需要深入研究吧!!! 我是这样想的. 直到我做了一道Java基础检测题,才发现,哦,原来是这样啊!!! 题是这样的 public class Demo { p ...

  10. 007、Java中定义int型变量

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...