摘要：第一種方法我嘗試了，覺得不是很好用，而且頁(yè)面的滑動(dòng)變得卡頓，橡皮筋效果還是時(shí)而出現(xiàn)，因此考慮第二種辦法。由上面的定義可知，當(dāng)頁(yè)面滑動(dòng)到頂部時(shí)，為，當(dāng)頁(yè)面出現(xiàn)橡皮筋時(shí)，小于當(dāng)頁(yè)面滑動(dòng)到底部時(shí)，。

    感謝的啟發(fā)，方法很有用！
    好幾個(gè)月以前，我寫了一個(gè)類似于自動(dòng)回復(fù)那種的客服頁(yè)面，嵌入到公司開發(fā)的app里。上周測(cè)試突然找到我，說(shuō)
頁(yè)面在滑動(dòng)的時(shí)候，輸入框也會(huì)跟著上下滑動(dòng)，而這個(gè)問題只在ios系統(tǒng)上出現(xiàn)，Android沒問題。測(cè)試的同學(xué)希望我
做點(diǎn)什么，把頁(yè)面固定住，不要隨著手指的滑動(dòng)上下動(dòng)。修改前的界面大概像下面的示意圖這樣：   

    經(jīng)過(guò)百度，知道了這叫做橡皮筋效果，是ios系統(tǒng)在引入網(wǎng)頁(yè)時(shí)專有的一種效果.要去掉這種效果，可以采用fixed
布局，也可以監(jiān)聽touchmove事件，利用event.preventDefault()解決。第一種方法我嘗試了，覺得不是很好用，而
且頁(yè)面的滑動(dòng)變得卡頓，橡皮筋效果還是時(shí)而出現(xiàn)，因此考慮第二種辦法。
    event.preventDefault()說(shuō)白了就是監(jiān)聽touchmove，在手指滑動(dòng)屏幕的時(shí)候，禁止掉頁(yè)面隨手指滑動(dòng)而滾動(dòng)的
默認(rèn)事件。看到這里問題就來(lái)了，我的頁(yè)面是一個(gè)聊天頁(yè)面，聊天記錄還是可以通過(guò)上下滑動(dòng)手指來(lái)查看的，如果禁止
了滾動(dòng)頁(yè)面，豈不是動(dòng)不了了？
    所以，需要給preventDefault()增加一個(gè)限制條件，即只有頁(yè)面滑動(dòng)到頂部或者底部了，才調(diào)用preventDefault(),
阻止對(duì)應(yīng)的滑動(dòng)事件。那么，如何判斷頁(yè)面是否已經(jīng)滑動(dòng)到兩端呢？利用clientHeight、scrollHeight和scrollTop
三個(gè)屬性。
    我們對(duì)這三個(gè)屬性做一下區(qū)分（對(duì)頁(yè)面中同一個(gè)元素而言）：
        clientHeight是元素展示在頁(yè)面中的固定高度；
        scrollHeight是當(dāng)元素中內(nèi)容很多，出現(xiàn)滾動(dòng)條時(shí)，元素中內(nèi)容的實(shí)際高度，scrollHeight>=clientHeight，
    當(dāng)不需要滾動(dòng)頁(yè)面時(shí)，二者相等；
        scrollTop是當(dāng)頁(yè)面滾動(dòng)時(shí)，頁(yè)面中內(nèi)容向上卷起來(lái)的距離，即內(nèi)容的頂部距離固定的元素頂部的距離。

    由上面的定義可知，當(dāng)頁(yè)面滑動(dòng)到頂部時(shí)，scrollTop為0，當(dāng)頁(yè)面出現(xiàn)橡皮筋時(shí)，scrollTop小于0.當(dāng)頁(yè)面滑動(dòng)
到底部時(shí)，scrollTop + clientHeight = scrollHeight。因此，我們可以寫下這樣的代碼：

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

      //如果是ios，執(zhí)行下面的代碼
      if(isiOS){
      //因?yàn)橐拐麄€(gè)頁(yè)面的滑動(dòng)，所以定義一個(gè)box，里面裝有chatBody和foot兩個(gè)子元素
        const box = document.getElementById("longbox");  
        const chatBody = document.getElementById("chatContainer");
        //開始滑動(dòng)，此處使用box元素的事件監(jiān)聽，來(lái)禁止整個(gè)頁(yè)面的滑動(dòng)
        box.addEventListener("touchmove", function(e){
            //如果滑到頂端或底端，禁止滑動(dòng)
          if(chatBody.scrollTop<=0 || chatBody.scrollTop + chatBody.clientHeight>=chatBody.scrollHeight){
            e.preventDefault();
          }
        })
      }
  }

    測(cè)試一下，發(fā)現(xiàn)一個(gè)問題，的確當(dāng)滑動(dòng)到頂部時(shí)，無(wú)法繼續(xù)上滑了，但同時(shí)也無(wú)法下滑了。為什么？因?yàn)閑.preventDefault()組織的是所有方向上的滑動(dòng)事件，所以當(dāng)頁(yè)面滑到頂端或者底端時(shí)，禁止了一切的滑動(dòng)，頁(yè)面就動(dòng)不了了。因此，考慮改進(jìn)代碼，增加一個(gè)上滑或者下滑的判斷：

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

      //如果是ios，執(zhí)行下面的代碼
      if(isiOS){
      //因?yàn)橐拐麄€(gè)頁(yè)面的滑動(dòng)，所以定義一個(gè)box，里面裝有chatBody和foot兩個(gè)子元素
        const box = document.getElementById("longbox");
        const chatBody = document.getElementById("chatContainer");
        var startY,endY; //定義滑動(dòng)的起點(diǎn)和終點(diǎn)
        //監(jiān)聽touchstart事件，記錄滑動(dòng)起點(diǎn)的位置
        box.addEventListener("touchstart", function(e){
          startY = e.touches[0].pageY;
        })
        //開始滑動(dòng)，此處使用box元素的事件監(jiān)聽，來(lái)禁止整個(gè)頁(yè)面的滑動(dòng)
        box.addEventListener("touchmove", function(e){
          endY = e.touches[0].pageY;  //記錄此時(shí)的滑動(dòng)y軸坐標(biāo)
         
          //頁(yè)面向上滑動(dòng)
          //頁(yè)面滾動(dòng)上去的長(zhǎng)度scrollTop
          if(endY>startY&& chatBody.scrollTop<=0){
            e.preventDefault();
          }

          //頁(yè)面向下滑動(dòng)
          //頁(yè)面的總長(zhǎng)度（包括滾動(dòng)上去的部分）scrollHeight
          if(endY=chatBody.scrollHeight){
            e.preventDefault();
          }
        })
      }
  }

   再測(cè)試，解決橡皮筋效果~
   啰嗦一下，上面的代碼是最終解決版的代碼，但其實(shí)中間還是遇到了一個(gè)小坑的，就是在多層div嵌套時(shí)，父容器的
   高度可能不定，由子容器撐開。比如我這個(gè)聊天頁(yè)面，父容器box只標(biāo)注了height:100%; container包括兩個(gè)子容
   器：子容器chat是需要滑動(dòng)的div，不定高，還有一個(gè)高度為47px的foot子容器。這時(shí)候，需要禁止整個(gè)頁(yè)面（其
   實(shí)就是父容器）的滑動(dòng)，子容器chat可以滑動(dòng)，所以，要監(jiān)聽box的事件，禁止的也是box的滑動(dòng)，而是否滑動(dòng)到頁(yè)
   面頂端/底端的判斷依據(jù)，則需要對(duì)chat的scrollHeight和scrollTop進(jìn)行判斷。
   第一次寫文章，說(shuō)的不對(duì)的地方，還請(qǐng)多多指正！