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.区域和不 ...
随机推荐
- 【Appium遇到的坑】环境配置无误,路径无中文,无空格,提示error: Logcat capture failed: spawn ENOENT
代码如下,提示error: Logcat capture failed: spawn ENOENT from appium import webdriver from time import slee ...
- jmap -heap命令用法
用jmap -heap命令可以查看linux堆内存分布 具体用法 1:先查出tomcat的进程号 例如: 然后执行 jmap -heap 7095 可以打印出整体的堆信息 可以看到经过分配的存活区 ...
- 如何面对这个残酷的世界?——Java模拟
1,问题引入: 房间里有100个人,每人都有100元钱,他们在玩一个游戏.每轮游戏中,每个人都要拿出一元钱随机给另一个人,最后这100个人的财富分布是怎样的? 2,问题思考: 今天有幸看到这道题目,起 ...
- java一周学习记录(2017/12/2)
姓名:Danny 日期:2017/12/2 周日 周一 周二 周三 周四 周五 周六 所花时间 120 150 190 150 180 28 ...
- 使用原生js 获取用户访问项目的浏览器类型
想要获取浏览器的类型很简单,网上提供了很多方法,但是看过之后,都是根据浏览器内核来判断是ie,谷歌,火狐,opeara的, 所以不能进一步判断在国内使用的主流浏览器类型,比如360,百度,搜狐浏览器等 ...
- c++ 十进制、十六进制和BCD的相互转换
#include <stdio.h> #include <string.h> #include <iostream> using namespace std; // ...
- 第二次课程总结&学习总结
Java实验报告 班级 计算机科学与技术一班 学号 20188390 姓名 宋志豪 实验 写一个名为Rectangle的类表示矩形.其属性包括宽width.高height和颜色color,width和 ...
- 第六周总结&第四次实验报告
实验四 类的继承 一. 实验目的 (1) 掌握类的继承方法: (2) 变量的继承和覆盖,方法的继承.重载和覆盖实现: 二. 实验内容 三.实验过程 实验代码 package Shiyan4; publ ...
- 教你在 IntelliJ IDEA 中使用 VIM!
Java技术栈 www.javastack.cn 优秀的Java技术公众号 IdeaVim(下载)插件可以让你在IntelliJ IDEA中键盘敲的飞起. 安装 打开IDEA的设置,在Plugins里 ...
- FastDFS分布式文件服务器
5.分布式文件服务器FastDFS(阿里巴巴) 5.1什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统.FastDFS 为互联网量身定制,充分考虑了冗余备份.负载均衡 ...