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.区域和不 ...
随机推荐
- Java ——继承
本节重点思维导图 面向对象三大特性:封装.继承.多态 面向对象编程的第一原则:面向接口编程 继承 代码利用的方式,子类与父类之间的关系 语法 访问控制修饰符 class 类名 extends父类名{ ...
- 使用Dockerfile制作镜像
组成部分 基础镜像信息 FROM 维护者信息 MAINTAINER.LABEL 镜像操作指令 RUN.COPY.ADD.EXPOSE.WORKDIR.ONBUILD.US ...
- JPA-style positional param was not an integral ordinal 异常
JPA-style positional param was not an integral ordinal 多是sql之间的空格问题,或者sql拼接问题. 字符串与字符串直接相加要加空格
- OpenGL字体绘制
/* glfont.hpp sdragonx 2019-08-15 00:03:33 opengl字体类,提供初学者参考学习 opengl初始化之后,创建字体 font.init(L"微软雅 ...
- 小白学Python——Matplotlib 学习(2):pyplot 画图
matplotlib.pyplot是一组命令样式函数,使matplotlib像MATLAB一样工作.每个pyplot函数都会对图形进行一些更改:例如,创建图形,在图形中创建绘图区域,在绘图区域中绘制一 ...
- python中,a=10.0 b=10.0 a is b 为什么输出是false
>>>a=10.0>>>b=10.0>>>a is bFalse为什么当a=10,b=10时,a is b输出的是True呢? >>& ...
- js实现404页面倒计时跳转
<script type="text/javascript"> (function(){ var i=5,timer=null,number=document.getE ...
- C#.NET、Power BI、数据挖掘
阅读目录 1.采集目目标特点与分析 2.方案第一版-Low到爆,别笑话 3.碰壁后的第二版方案 4.最终方案第三版 5.总结 说起采集,其实我是个外行,以前拔过阿里巴巴的客户数据,在我博客的文章:C# ...
- C#设计模式:备忘录模式(Memento Pattern)
一,C#设计模式:备忘录模式(Memento Pattern) 1.发起人角色(Originator):记录当前时刻的内部状态,负责创建和恢复备忘录数据.负责创建一个备忘录Memento,用以记录当前 ...
- ExtensionlessUrlHandler-Integrated-4.0
window 10 锁定webconfig解决方案 解决办法: 出现这个错误是因为 IIS 7 采用了更安全的 web.config 管理机制,默认情况下会锁住配置项不允许更改.要取消锁定可以以管理 ...