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>

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

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

赞 (0)

相关推荐

  • 解决微信浏览器Javascript无法使用window.location.reload()刷新页面

    场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信浏览器中reoad后请求的一直是第一次打开页面时请求的数据.可以理解为请求被缓存了,但没有实测,也不知道是否是缓存. 解决方法是,使用window.location.href="window.location.href+随机数" 代替 window.location.reload().切记

  • JS如何设置iOS中微信浏览器的title

    说到web前端,浏览器差异是不可回避的问题,这次在项目就遇到下面的问题: 微信导航栏的内容是直接拿的项目中title来设置的.但是现在做的项目是一个单页应用,整个页面只会在第一次完全刷新,后面只会局部刷新,所以只能在页面刷新的时候通过js动态修改title.开始我们使用的做法如下: document.title = "微信导航栏想要显示的内容"; $("title").text("微信导航栏想要显示的内容"); document.getEleme

  • 微信浏览器弹出框滑动时页面跟着滑动的实现代码（兼容Android和IOS端）

    在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动. 我觉得这个问题用的是下面这几行代码: var $body = $('body'), dialogIsInView = !1,//当前是不是对话框 lastContentContainerScrollTop = -1,//用于弹出框禁止内容滚动 $contentContainer = $('#content-container');//内容容器 //阻止Window滚动 function stopWindowScroll() {

  • 微信小程序 在Chrome浏览器上运行以及WebStorm的使用

    微信小程序 在Chrome浏览器上运行以及WebStorm的使用

    「微信小程序」的开发框架体验起来,还不错--自带了UI框架.但是问题是他的IDE,表现起来相当的糟糕--其实主要是因为,我当时买WebStorm License买了好多年.所以,我觉得他的IDE真不如我这个付费好用. 而且,作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」.微信在「微信小程序」引导着Web开向封闭,我们再也不能愉快地分享我们的代码了. 如果我们放任下去,未来的Web世界令人堪忧. 好了,废话说完了: 文章太长不想看,可以直接看Demo哈哈: GitHu

  • PHP判断是手机端还是PC端 PHP判断是否是微信浏览器

    本文实例为大家分享了PHP判断的两个实例,一是PHP判断是手机端还是PC端,二是PHP判断是否是微信浏览器,供大家参考,具体内容如下 1.判断是否是手机端 function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset($_SERVER['HTTP_X_WAP_PROFILE'])) { return true; } // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息 if (isset($_SERVER['H

  • 微信浏览器禁止页面下拉查看网址实例详解

    微信浏览器禁止页面下拉查看网址实例详解 此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件: $('body').on('touchmove', function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, false); 但这样往往会把页面原生的scroll效果也一同去掉了,下面的代码可以完美解决这

  • Android 开发 使用WebUploader解决安卓微信浏览器上传图片中遇到的bug

    先给大家分析下微信浏览器上传图片bug的原因 微信在新版本中采用的是自己的X5内核浏览器,而在较老的版本中还有可能是安卓的原生浏览器.具体的环境我也不太了解,但是经过实际多台安卓机型的测试,我采取的方案可以基本确保在安卓机中微信浏览器的成功上传.苹果机型没问题,因为微信的ios客户端使用的是Safari的内核,没有各种坑,且效果最好. 这里给出一个 WebUploader 官方关于移动端适配的 issues 链接.里面提供的方法确实有效,但就是解决的方案并没有很清楚的展示出来,从该issues中

  • JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

    在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢. 我相信很多朋友像我一样,在百度.搜狗里面搜索很久都没找到方法. 下面就来告诉大家怎样监听的方法: 首先我们要了解浏览器的history. 大家知道在页面中我们可以使用javascript window history,后退到前面页面,但是由于安

  • 解决微信内置浏览器返回上一页强制刷新问题方法

    微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置. BINGO~ 通过HTML5的history API + 缓存可以做到这一点. 执行原理: 1.0.通过history API的 history.pushState或 history.replaceState 保存AJAX状态: 2.0.同时将AJAX获取到的数据缓存起来(可以考虑使用H5的

  • JavaScript 监控微信浏览器且自带返回按钮时间

    比如现在有一个操作 是 A->B->C->B 在B页面的返回键 第一次返回的是C 如果想直接返回A或者其他地方 则需要触发返回事件 pushHistory(); window.addEventListener("popstate", function(e) { //alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 window.location = 'http://www.baidu.com'; }, false

随机推荐