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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
学习Angularjs分页指令
Jul 01 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
使用Vue CLI创建typescript项目的方法
Aug 09 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
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
详解nodejs中的process进程
2017/03/19 NodeJs
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python脚本调试工具安装过程
2021/01/11 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
大学四年个人自我小结
2014/03/05 职场文书
联片教研活动总结
2014/07/01 职场文书
家具商场的活动方案
2014/08/16 职场文书
读书笔记格式
2015/07/02 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
MongoDB支持的数据类型
2022/04/11 MongoDB
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python