去除手机端触摸滑动事件ontouchmove
window.ontouchmove=function(e){
e.preventDefault && e.preventDefault();
e.returnValue=false;
e.stopPropagation && e.stopPropagation();
return false;
}
微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件: $(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});
or
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
但这样往往会把页面原生的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 === 0) {
el.scrollTop = 1;
} else if(currentScroll === totalScroll) {
el.scrollTop = top - 1;
}
});
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();
}
}); 原文链接:http://www.jianshu.com/p/2eddee561971
去除手机端触摸滑动事件ontouchmove的更多相关文章
- jQuery手机端触摸卡片切换效果
效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...
- 原生js手机端触摸下拉刷新
废话不多说,直接上代码,这里感谢我的好朋友,豆姐 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- js 手机端触发事事件、javascript手机端/移动端触发事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 ...
- js手机端判断滑动还是点击
网上的代码杂七杂八, 我搞个简单明了的!! 你们直接复制粘贴, 手机上 电脑上 可以直接测试!!! 上图: 上代码: <!DOCTYPE html> <html lang=&q ...
- 手机端 zepto tap事件穿透
什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 ...
- Html5 移动端 触摸滑动事件
以下代码经过测试 没有问题 且可以循环滑动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"& ...
- 手机端左右滑动,不用写js(只有页面切换到移动端可以看)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 去除手机端a标签等按下去背景色
a,button,input,textarea,label,i,em{/*highlight*/ -webkit-tap-highlight-color: rgba(255,0,0,0); borde ...
- JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)
本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...
随机推荐
- windows server 2008 配置安装AD 域控制器
工作需要,搞起AD域来,具体配置如下: 配置环境 Windows版本:Windows Server 2008 R2 Enterprise Service Pack 1 系统类型: 64 位操作系统 配 ...
- [Android Pro] Android 6.0 Root
reference : http://bbs.gfan.com/android-8001827-1-1.html 2. 刷机和刷入recovery 建议参考 置顶教程: [15年3月31日更新]Nex ...
- 如何激活webstorm 11
以前使用webstorm 10,可以在网上搜个注册码进行激活.后来升级了webstorm 11,发现原来的注册码和注册机已经不能激活了.查询后,才知道WebStorm 11改变了注册方法,可以在Lic ...
- 解决 The MySQL server is running with the --skip-grant-tables option so it cannot execute this statement
这个时候我们只需要flush privileges 一下就OK了,mysql> flush privileges;Query OK, 0 rows affected (0.01 sec)
- php导出excel封装类
因为实际情况的需要,导出excel表格在后台开发的过程中会经常用到.下面是我在实际应用中自己整理的一个导出excel类,需要PHPExcel支持,本类很好的完成导出表格的基本样式,保存路径,切换工作薄 ...
- Oracle数据库备份与还原操作具体步骤
Oracle数据库导出操作 导入导出都要进行目录创建与授权. 在pl/sql里面编写也可以 select * from dba_directories(这个是查看创建的目录) drop directo ...
- vim、gvim加载文件慢
1. strace -f -T -o vim.strace vim 2. vim --startuptime "vim-time.txt" 3. gvim -f
- 在多台服务器上简单实现Redis的数据主从复制(3)(转载)
转载地址:http://www.cnblogs.com/liping13599168/archive/2011/04/14/2016226.html Redis的主从复制功能非常强大,一个master ...
- Android中libs目录下armeabi和armeabi-v7a的区别
armeabi默认选项,支持基于 ARM* v5TE 的设备支持软浮点运算(不支持硬件辅助的浮点计算)支持所有 ARM* 设备 armeabi-v7a支持基于 ARM* v7 的设备支持硬件 FPU ...
- POJ2406 Power Strings(KMP,后缀数组)
这题可以用后缀数组,KMP方法做 后缀数组做法开始想不出来,看的题解,方法是枚举串长len的约数k,看lcp(suffix(0), suffix(k))的长度是否为n- k ,若为真则len / k即 ...