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


Posted in Javascript onMay 16, 2017

本文实例为大家分享了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>

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

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

Javascript 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
Javascript 获取LI里的内容
Dec 17 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
jQuery实现div跟随鼠标移动
Aug 20 #jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 #jQuery
bootstrap响应式表格实例详解
May 15 #Javascript
VUE多层路由嵌套实现代码
May 15 #Javascript
JavaScript制作简单的框选图表
May 15 #Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 #Javascript
AngularJs 常用的过滤器
May 15 #Javascript
You might like
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
python框架flask表单实现详解
2019/11/04 Python
python 数据类型强制转换的总结
2021/01/25 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
大学生党课思想汇报
2013/12/29 职场文书
函授药学自我鉴定
2014/02/07 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
教师个人教学反思
2016/02/23 职场文书