现在很多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. 「NOIP2010」引水入城

    传送门 Luogu 解题思路 第一问很好做,只要总第一行的每一个点都跑一边dfs,判断最后一行是否有点标记不了即可. 考虑处理第二问. 其实这一问就是: 把第一行的点都看做是对最后一行一些点的覆盖,求 ...

  2. 「JSOI2007」建筑抢修

    传送门 Luogu 解题思路 显然先把所有楼按照报废时间递增排序. 然后考虑 \(1\cdots i-1\) 都能修完, \(i\) 修不完的情况. 显然我们在这 \(i\) 个里面至多只能修 \(i ...

  3. 关于pandas增加行时，索引名称的一些问题

    学习pandas两天了,关于这个增加行的问题一直困扰着我,测试了几个代码,终于搞通了一点(昨天是因为代码敲错了...) 直接上代码: dates = pd.date_range(',periods=6 ...

  4. SSH框架与SSI框架的区别

    2013-03-04 13:45 1427人阅读 评论(0) 收藏 举报 一.SSH 整个配置如下图所示: 1. <?xml version="1.0" encoding=& ...

  5. Python Sklearn.metrics 简介及应用示例

    Python Sklearn.metrics 简介及应用示例 利用Python进行各种机器学习算法的实现时,经常会用到sklearn(scikit-learn)这个模块/库. 无论利用机器学习算法进行 ...

  6. MQTT 协议学习：006-订阅主题 与 对应报文(SUBSCRIBE、SUBACK、UNSUBSCRIBE、UNSUBACK)

    背景 之前我们提到了怎么发布消息对应的报文:现在我们来看,订阅一个主题的报文是怎么样的. SUBSCRIBE - 订阅主题 客户端向服务端发送SUBSCRIBE报文用于创建一个或多个订阅.每个订阅注册 ...

  7. wx.previewimage预览返回会触发onshow的处理方法

    最近做详情页,添加图片预览后竟然触发onshow的处理方法.就显得很尴尬.框架用的uni-app 解决方法 1.page外全局定义开关变量 var a; export default { } 2 .o ...

  8. Service IP 原理【转】

    Service Cluster IP 是一个虚拟 IP,是由 Kubernetes 节点上的 iptables 规则管理的. 可以通过 iptables-save 命令打印出当前节点的 iptable ...

  9. Redis Cluster 获取主从关系

    redis-cli -h 192.168.11.111 -p 6380 -c cluster slots | xargs  -n8 | awk '{print $3":"$4&qu ...

  10. GoJS实例2

    复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta name=&quo ...