js移动客户端-----取消滑动事件(亲测好用)

现在做的响应式网站,遇到一问题:

网站头上的侧边栏点开始,向下滑动会出现空白,于是,想到要把body禁止滑动

网上搜了很多办法,也不好用

注意:

手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

2.禁止滚动

preventDefault是阻止默认行为,touch事件的默认行为就是滚动。

event.preventDefault();

我的解决步骤如下:

阻止默认
$("body").on("touchmove",function(event){
event.preventDefault;
}, false)设置body的高度为窗口的高度 $("body").height( $(window).height());
时间: 2024-08-06 07:59:26

js移动客户端-----取消滑动事件(亲测好用)的相关文章

js移动端滑动事件

1 <div id="box" style="width:100%;height:100%;border:1px solid red;"></div> 2 3 <script> 4 //定义变量,用于记录坐标和角度 5 var startx,starty,movex,movey,endx,endy,nx,ny,angle; 6 //开始触摸函数,event为触摸对象 7 function touchs(event){ 8 even

js触屏滑动事件

var answerBar=document.getElementById("answerSelect");var start_left;var end_left;answerBar.addEventListener("touchstart",function(event){    event.preventDefault();    if (event.targetTouches.length == 1) {        var touch = event.ta

文件上传时如何携带参数和接收返回值(亲测有效)

1.页面 2.js 3.java后台接收 亲测有效 原文地址:https://www.cnblogs.com/ysyy/p/12174535.html

JS移动客户端--触屏滑动事件 banner图效果

JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取

JS移动客户端--触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发

&#31227;&#21160;&#31471;&#19978;&#19979;&#28369;&#21160;&#20107;&#20214;&#20043;--&#22353;&#29241;&#30340;touch.js

转:http://blog.csdn.net/minidrupal/article/details/39611605?utm_source=tuicool&utm_medium=referral 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩。 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画。 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面,坑爹的touch.js的上下滑动

移动端上下滑动事件之--坑爹的touch.js

原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩. 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画. 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面,坑爹的touch.js的上下滑动( swipe )事件失效. 在举例之前,先科普一下如何在pc端,查看h

js实现touch移动触屏滑动事件

以下是四种touch事件touchstart: //手指放到屏幕上时触发touchmove: //手指在屏幕上滑动式触发touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表 touches: //当前屏幕上所有手指的列表targetTouches: //当前dom元素上手指的列表,尽量使用这个代替toucheschangedTouche

移动端js手指滑动事件初体验

今天在公司遇到做一个移动端手指滑动的效果,刚开始用了swiper.js插件发现效果不好(文字存在模糊效果).后来查了一些资料,自己手写了一个使用原生js写的滑动效果. 下面直接上代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=