Mobile的HTML5网页内快速滚动和回弹的效果
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网页内快速滚动和回弹的效果的更多相关文章
- Mobile-H5网页快速滚动和回弹
现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要加一行css代码即可: -webkit-overflow-sc ...
- 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现
现在很多for Mobile的H5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要加一行css代码即可: -webkit-overflow-scrol ...
- ios客户端快速滚动和回弹效果的实现
现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要给容器加一行css代码即可 -webkit-overflow- ...
- 浅谈html5网页内嵌视频
更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...
- HTML5+CSS3制作无限滚动与文字跳动效果
㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...
- 【转】浅谈html5网页内嵌视频
转自 http://www.pchou.info/web/2014/01/30/52ea01e13a7f1.html
- -webkit-overflow-scrolling : touch 快速滚动 回弹 效果
现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要在元素上加一行css代码即可: -webkit-overflo ...
- 快速完成网页设计,10个顶尖响应式HTML5网页模板助你一臂之力
为了寻找一个优质的网页模板,网页设计师和开发者往往可能会花上大半天的时间.不过幸运的是,现在的网页设计师和开发人员已经开始共享HTML5,Bootstrap和CSS3中的免费网页模板资源.鉴于网站模板 ...
- HTML-图片热点、网页内嵌、网页拼接、快速切图
图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.与图片链接不同,热点是图片上的某一个区域或多个区域. 我们用魔兽世界图片来做一个图片热点,点击logo.区域和不 ...
随机推荐
- Cocos2d-X网络编程(4) Cocos2d中的网络通信协议——Socket通信
Socket,俗称网络套接字,本身并不是协议,而是一个调用接口,是对TCP/IP协议的封装和应用,.提供了一系列方法方便开发者进行网络通讯. TCP/IP协议是使用最早的通讯协议,它是传输层协议,主要 ...
- 【Linux开发】全面的framebuffer详解
全面的framebuffer详解 一.FrameBuffer的原理 FrameBuffer 是出现在 2.2.xx 内核当中的一种驱动程序接口. Linux是工作在保护模式下,所以用户态进程是无法象D ...
- 【QT开发】QT在windows下的exe应用程序如何在别人的电脑上直接运行
当你利用QT编译了一个可执行程序,需要将这个可执行程序拷贝到别人的电脑上运行,这个时候除了这个可执行程序外,还需要支持的库才可用运行.一般来说通过下面的方法可以实现. 首先,需要看你用的是什 ...
- kafka学习(二)
创建kafka生产者 要往kafka写入消息,首先要创建一个生产者对象,并设置一些熟悉.kafka生产者有3个必选的属性. 1.bootstrap.servers 该属性指定broker的地址清单 ...
- nginx rewrite + 排错方法 + server_name 172.19.134.43
upstream space.two.cn { ip_hash; #ip hash:每个请求按访问ip的hash结果分配,这样每个访客固定访问一个后端服务器,可以解决session的问题. serve ...
- 分享之测试WebService小工具 STORM(转)
http://www.cnblogs.com/yhuang/archive/2012/04/04/share_storm.html 最近的项目中,一直要使用到WebService,为了测试自己编写的W ...
- [Git] 022 没有人是一座孤岛
0.回顾 [Git] 015 远程仓库篇 第二话 关联与推送 的 "2" 中介绍过 git remote git remote -v 与 "status" 不同 ...
- C语言数组名取地址。。。
int main(){ int a[5] = { 1, 2, 3, 4, 5 }; printf("%08X ,%08X ,%08X ,%08X", a, &a, a + ...
- idea使用Vue的v-bind,v-on报错
参考解决在WebStorm中使用Vue的v-bind,v-on报错 File-->Settings-->Editor-->Inspections-->XML 把 Unbound ...
- 本地代码推送到远程git仓库
# 1. 在远程新建一个代码仓库(如码云,github..) # 2. 将本地代码提交 git init git add * git commit -am "first init" ...