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

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

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

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

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

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

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

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

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

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

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