style="overflow: auto;-webkit-overflow-scrolling: touch;

这个可以让页面在Native端滚动时模拟原生的弹性滚动效果

下面是微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)

var overscroll = function(el) {
el.addEventListener(‘touchstart‘, function() {
var top = el.scrollTop
, totalScroll = el.scrollHeight
, currentScroll = top + el.offsetHeight;
//If we‘re at the top or the bottom of the containers
//scroll, push up or down one pixel.
//
//this prevents the scroll from "passing through" to
//the body.
if(top === ) {
el.scrollTop = ;
} else if(currentScroll === totalScroll) {
el.scrollTop = top - ;
}
});
el.addEventListener(‘touchmove‘, function(evt) {
//if the content is actually scrollable, i.e. the content is long enough
//that scrolling can occur
if(el.offsetHeight < el.scrollHeight)
evt._isScroller = true;
});
}
overscroll(document.querySelector(‘.scroll‘));
document.body.addEventListener(‘touchmove‘, function(evt) {
//In this case, the default behavior is scrolling the body, which
//would result in an overflow. Since we don‘t want that, we preventDefault.
if(!evt._isScroller) {
evt.preventDefault();
}
});

Mobile的HTML5网页内快速滚动和回弹的效果的更多相关文章

  1. Mobile-H5网页快速滚动和回弹

    现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要加一行css代码即可: -webkit-overflow-sc ...

  2. 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现

    现在很多for Mobile的H5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要加一行css代码即可: -webkit-overflow-scrol ...

  3. ios客户端快速滚动和回弹效果的实现

    现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要给容器加一行css代码即可 -webkit-overflow- ...

  4. 浅谈html5网页内嵌视频

    更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...

  5. HTML5+CSS3制作无限滚动与文字跳动效果

    ㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...

  6. 【转】浅谈html5网页内嵌视频

    转自 http://www.pchou.info/web/2014/01/30/52ea01e13a7f1.html

  7. -webkit-overflow-scrolling : touch 快速滚动 回弹 效果

    现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要在元素上加一行css代码即可: -webkit-overflo ...

  8. 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力

    为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...

  9. HTML-图片热点、网页内嵌、网页拼接、快速切图

    图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.与图片链接不同,热点是图片上的某一个区域或多个区域. 我们用魔兽世界图片来做一个图片热点,点击logo.区域和不 ...

随机推荐

  1. 【SD系列】SAP SD凭证处理被批次处理冻结

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[SD系列]SAP SD凭证处理被批次处理冻结 ...

  2. 【MM系列】SAP 交货单屏幕增强

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 交货单屏幕增强   前言部分 ...

  3. java 中的equals()小结

    转载自http://www.cnblogs.com/jackyrong/archive/2006/08/20/481994.html Java中的equals是十分重要的,和= =要区别开来,最近在看 ...

  4. Unique Word Abbreviation

    An abbreviation of a word follows the form <first letter><number><last letter>. Be ...

  5. linux 获取目录中详细信息 -rw-r--r--详解

    -rw-r–r– 1 root root 1313 Sep 3 14:59 test.log详解 查询目录中的内容命令 ls [选项] [文件或目录] 选项: -a 显示所有文件.包括隐藏文件 -l ...

  6. 【7.10校内test】T3经营与开发

    [题目链接luogu] 它……又是个DP 我……我讨厌DP!? 然后又是读入,显然用快读啊:(数据范围还是很大的)(习惯) 然后我们发现,不论是损耗值维修值,还是采矿所得,维修花费,都带着个p,因此我 ...

  7. P1106删数游戏

    这道题曾经在CQOJ上考过,是第二次做了. 这是一道使用字符串的贪心题.首先要根据机组例子来确定:删除递增序列的最后一位.即循环找到那一位后,把后面的数往前压.所以我在艰难处理完双重循环后(这个处理不 ...

  8. 本地代码推送到远程git仓库

    # 1. 在远程新建一个代码仓库(如码云,github..) # 2. 将本地代码提交 git init git add * git commit -am "first init" ...

  9. Python 里面如何生成随机数?

    在 Python 中用于生成随机数的模块是 random,在使用前需要 import. 如下例子可以酌情列举: random.random():生成一个 0-1 之间的随机浮点数: random.un ...

  10. 在.NET使用Newtonsoft.Json转换,读取,写入json

    首先,大家要明白什么是json,了解更多关于json方面资料大家可以点击https://www.ibm.com/developerworks/cn/web/wa-lo-json/ ,我在这里简单介绍下 ...