var overscroll = function(el){ el.addEventListener('touchstart', function(){ var top = el.scrollTop;" />
当前位置:首页 > 日记 > 正文

JavaScript禁止微信浏览器下拉回弹效果

JavaScript禁止微信浏览器下拉回弹效果

本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下

方法1:

<script type="text/javascript">   var overscroll = function(el){     el.addEventListener('touchstart', function(){       var top = el.scrollTop;       var totalScroll = el.scrollHeight;       var currentScroll = top + el.offsetHeight;       if(top === 0) {         el.scrollTop = 1;       }else if(currentScroll === totalScroll){         el.scrollTop = top - 1;       }     });     el.addEventListener('touchmove', function(evt){       if(el.offsetHeight < el.scrollHeight){         evt._isScroller = true;       }     });   }   overscroll(document.querySelector('.scroll'));//哪里需要可以局部滚动,添加一个“scroll”的class   document.body.addEventListener('touchmove', function(evt) {     if(!evt._isScroller){       evt.preventDefault();     }   }); </script>

此方法的优缺点:
优点:支持局部滚动;
缺点:浏览器本身超出页面出现的滚动被禁用掉了,需要改为局部滚动,且局部滚动的地方需要加“scroll”的class。
注:如果同一个页面多个局部滚动,需要将
overscroll(document.querySelector('.scroll');
改为
for(var i=0;i<document.querySelectorAll('.scroll').length;i++){
overscroll(document.querySelectorAll('.scroll')[i]);
}

方法2:

<script type="text/javascript">   function stopDrop(){     var lastY;//最后一次y坐标点     $(document.body).on('touchstart', function(event) {       lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。     });     $(document.body).on('touchmove', function(event) {       var y = event.originalEvent.changedTouches[0].clientY;       var st = $(this).scrollTop(); //滚动条高度        if (y >= lastY && st <= 10) {//如果滚动条高度小于0,可以理解为到顶了,且是下拉情况下,阻止touchmove事件。         lastY = y;         event.preventDefault();       }       lastY = y;     });   } </script> 

此方法的优缺点:
优点:支持浏览器本身超出页面的滚动
缺点:不支持局部滚动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

react系列从零开始_简单谈谈react

react系列从零开始_简单谈谈react

从零开始,简单,系列,电脑软件,react,react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到webpack,node等前端知识,每天会…

javascript+css3开发打气球小游戏

javascript+css3开发打气球小游戏

小游戏,完整,代码,电脑软件,javascript,效果知识点:css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等。css代码如下:<style>{margin:0;padding:0;}body{background:#434343;…

jQuery分页插件jquery.pagination.

jQuery分页插件jquery.pagination.

分页,插件,使用方法,电脑软件,jQuery,jquery.pagination.js插件,此jQuery插件为Ajax分页插件,一次性加载全部数据,故分页切换时无刷新与延迟,只是重写指定dom元素中的html内容,如果数据量较大不建议用此方法,因为加载会比较慢;jQuery的多数插件使…

node.js 利用流实现读写同步,边读

node.js 利用流实现读写同步,边读

读写,方法,同步,电脑软件,node,如下所示://10个数 10个字节,每次读4b,写1blet fs=require("fs");function pipe(source,target) { //先创建可读流,再创建可写流 //先读一次,rs.on(data) //将读到的类容写入目标中 ,返回布尔值,如果是ture,继…

ie下js不执行的几种可能

ie下js不执行的几种可能

不执行,几种,电脑软件,js,1、首先考虑的就是代码是否有报错2、其次搜索代码中是否有console.log等测试的代码3、检查所用的方法是否兼容ie以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!…

javascript闭包功能与用法实例分析

javascript闭包功能与用法实例分析

实例分析,闭包,功能,电脑软件,javascript,本文实例讲述了javascript闭包功能与用法。分享给大家供大家参考,具体如下:理解闭包闭包这个东西,确实是很麻烦。之前我自己的理解也是有一点误差,所以今天将文章修改修改,争取将自己的理解进一步准确化…

在Word2007中怎样设置默认表格样式

在Word2007中怎样设置默认表格样式

设置,默认,样式,表格,电脑软件,  默认情况下,在Word2007中插入的表格均默认使用普通样式。用户可以将表格样式库中最常用的表格样式作为默认样式,使新插入的表格都使用该样式。以下是小编为您带来的关于在Word2007中设置默认表格样式,希望对…

JQ文件上传之前预览功能的简单实例

JQ文件上传之前预览功能的简单实例

简单实例,分享,文件上传,功能,电脑软件,1、先准备一个divonchange触发事件<input type="file" onchange="preview(this)" ></span><div id="preview"></div>2、写JS代码//上传图片之前预览图片function preview(file){if (file.files…

在Word2007文档中怎么设置剪贴画棱

在Word2007文档中怎么设置剪贴画棱

文档,设置,效果,剪贴画,电脑软件,  在Word2007文档中,用户可以为剪贴画设置棱台效果,从而实现剪贴画的多种立体化效果,例如棱纹、斜面、凸起等棱台效果。以下是小编为您带来的关于在Word2007文档中设置剪贴画棱台效果,希望对您有所帮助。在Wo…

ES6中Array.find | 和findIndex |

ES6中Array.find | 和findIndex |

函数,详解,电脑软件,Array,findIndex,ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。他们的都是一个查找…

js字符限制 | 字符截取 一个中文汉

js字符限制 | 字符截取 一个中文汉

字符,字符截取,中文,汉字,两个,html<input type="text" id="txt">核心js代码//字符串截取function getByteVal(val, max) {var returnValue = '';var byteValLen = 0;for (var i = 0; i < val.length; i++) {if (val[i].match(/[^\x…

如何给photoshop安装新的字体

如何给photoshop安装新的字体

安装,字体,方法,电脑软件,photoshop,  给photoshop安装新的字体,也是为了我们可以用到更多不同的字体。但是很多同学还不太清楚。那么接下来下面是小编整理的一些关于如何给photoshop安装新的字体,供您参阅。给photoshop安装新的字体的方法…