vue连系preventDefault()和页面转动高度盘算，处理ios橡皮筋结果

2019年8月20日 265次阅读 来源: wendy巨坑 
    谢谢<https://www.cnblogs.com/cuncunjun/p/7493782.html>的启示，要领很有效！
    好几个月之前，我写了一个类似于自动复兴那种的客服页面，嵌入到公司开辟的app里。上周测试倏忽找到我，说
页面在滑动的时刻，输入框也会跟着高低滑动，而这个题目只在ios体系上涌现，Android没题目。测试的同砚愿望我
做点什么，把页面牢固住，不要跟着手指的滑动高低动。修正前的界面也许像下面的示意图如许：

《vue连系preventDefault()和页面转动高度盘算，处理ios橡皮筋结果》《vue连系preventDefault()和页面转动高度盘算，处理ios橡皮筋结果》

    经由百度，知道了这叫做橡皮筋结果，是ios体系在引入网页时专有的一种结果.要去掉这类结果，能够采纳fixed
规划，也能够监听touchmove事宜，应用event.preventDefault()处理。第一种要领我尝试了，以为不是很好用，而
且页面的滑动变得卡顿，橡皮筋结果照样时而涌现，因而斟酌第二种方法。
    event.preventDefault()说白了就是监听touchmove，在手指滑动屏幕的时刻，制止掉页面随手指滑动而转动的
默许事宜。看到这里题目就来了，我的页面是一个谈天页面，谈天纪录照样能够经由过程高低滑动手指来检察的，假如制止
了转动页面，岂不是动不了了？
    所以，须要给preventDefault()增添一个限定前提，即只要页面滑动到顶部或许底部了，才挪用preventDefault(),
阻挠对应的滑动事宜。那末，怎样推断页面是不是已滑动到两头呢？应用clientHeight、scrollHeight和scrollTop
三个属性。
    我们对这三个属性做一下辨别（对页面中同一个元素而言）：
        clientHeight是元素展现在页面中的牢固高度；
        scrollHeight是当元素中内容许多，涌现转动条时，元素中内容的现实高度，scrollHeight>=clientHeight，
    当不须要转动页面时，两者相称；
        scrollTop是当页面转动时，页面中内容向上卷起来的间隔，即内容的顶部间隔牢固的元素顶部的间隔。

《vue连系preventDefault()和页面转动高度盘算，处理ios橡皮筋结果》

    由上面的定义可知，当页面滑动到顶部时，scrollTop为0，当页面涌现橡皮筋时，scrollTop小于0.当页面滑动
到底部时，scrollTop + clientHeight = scrollHeight。因而，我们能够写下如许的代码：

mounted(){
//推断是不是是ios
      let u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

      //假如是ios，实行下面的代码
      if(isiOS){
      //由于要制止全部页面的滑动，所以定义一个box，内里装有chatBody和foot两个子元素
        const box = document.getElementById("longbox");  
        const chatBody = document.getElementById("chatContainer");
        //最先滑动，此处运用box元素的事宜监听，来制止全部页面的滑动
        box.addEventListener("touchmove", function(e){
            //假如滑到顶端或底端，制止滑动
          if(chatBody.scrollTop<=0 || chatBody.scrollTop + chatBody.clientHeight>=chatBody.scrollHeight){
            e.preventDefault();
          }
        })
      }
  }
    测试一下，发明一个题目，的的当滑动到顶部时，没法继承上滑了，但同时也没法下滑了。为何？由于e.preventDefault()构造的是一切方向上的滑动事宜，所以当页面滑到顶端或许底端时，制止了一切的滑动，页面就动不了了。因而，斟酌革新代码，增添一个上滑或许下滑的推断：
mounted(){
//推断是不是是ios
      let u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

      //假如是ios，实行下面的代码
      if(isiOS){
      //由于要制止全部页面的滑动，所以定义一个box，内里装有chatBody和foot两个子元素
        const box = document.getElementById("longbox");
        const chatBody = document.getElementById("chatContainer");
        var startY,endY; //定义滑动的出发点和尽头
        //监听touchstart事宜，纪录滑动出发点的位置
        box.addEventListener("touchstart", function(e){
          startY = e.touches[0].pageY;
        })
        //最先滑动，此处运用box元素的事宜监听，来制止全部页面的滑动
        box.addEventListener("touchmove", function(e){
          endY = e.touches[0].pageY;  //纪录此时的滑动y轴坐标
         
          //页面向上滑动
          //页面转动上去的长度scrollTop
          if(endY>startY&& chatBody.scrollTop<=0){
            e.preventDefault();
          }

          //页面向下滑动
          //页面的总长度（包含转动上去的部份）scrollHeight
          if(endY<startY&& chatBody.scrollTop + chatBody.clientHeight>=chatBody.scrollHeight){
            e.preventDefault();
          }
        })
      }
  }
   再测试，处理橡皮筋结果~
   烦琐一下，上面的代码是终究处理版的代码，但实在中心照样遇到了一个小坑的，就是在多层div嵌套时，父容器的
   高度能够不定，由子容器撑开。比方我这个谈天页面，父容器box只标注了height:100%; container包含两个子容
   器：子容器chat是须要滑动的div，不定高，另有一个高度为47px的foot子容器。这时刻，须要制止全部页面（其
   实就是父容器）的滑动，子容器chat能够滑动，所以，要监听box的事宜，制止的也是box的滑动，而是不是滑动到页
   面顶端/底端的推断根据，则须要对chat的scrollHeight和scrollTop举行推断。
   第一次写文章，说的不对的处所，还请多多斧正！
    原文作者：wendy巨坑
    原文地址: https://segmentfault.com/a/1190000017433190
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞