移動端解決input框被輸入法擋住的問題

有過移動端web開發經驗的人應該都會遇到這個問題，一個input在頁面最底部或者偏下的位置，輸入時由於輸入法的彈出，在部分瀏覽器下由於不會自動計算window的高度，導致input被輸入法擋住。
本文的解決方式是利用scrollTop來解決，在input獲取焦點後，動態地設置body的高度並設置scrollTop到指定位置，這樣可以保證input會滾動到輸入法上方，失去焦點後再恢復原來的位置。
有兩種情況：
1、input在頁面最底部，後面沒有其他元素，這種情況我們可以獲取窗口的高度減去input的高度再減去一些空餘高度，可以得到應該滾動的高度，var scrollHeight = $(window).height() - $(‘input’).height() - 40，這種情況下這麼計算很合適，沒什麼問題。
2、然而有時候input不是在最底部，之後還有其他元素，如果按照上一種方式，當你滾動到input在屏幕中間或者上部的時候，由於滾動距離還是上一種方式獲取的，這個時候滾動距離會大於應該滾動的距離，導致input直接到頁面上方被隱藏了。
這個時候我們換種思路，只要想辦法獲取input到窗口的上邊框的距離即可，其他代碼都一樣，那麼可以這麼寫，var scrollHeight = $(‘input’).offset().top - $body.scrollTop() - 40，即input距離頁面頂部的高度減body滾動的高度獲得input距離窗口上方的高度。

<div style="height: 800px;"></div>
  <input type="text" style="width: 100%;height: 40px; ">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script>
    var scrollHeight, //應該滾動的距離
      $body = $('body')
    $('input').on('focus', function () {
      //input距離頁面頂部的高度減body滾動的高度獲得input距離窗口上方的高度，40表示距離頂部留點空隙
      scrollHeight = $('input').offset().top - $body.scrollTop() - 40
      console.log(scrollHeight)
      //先修改body的高度，在滾動到對應的位置
      $body.height($body.height() + scrollHeight).animate({scrollTop: $body.scrollTop() + scrollHeight}, 300);
    }).on('blur', function () {
      //input失去焦點後恢復到原來的位置
      $body.animate({height: $body.height() - scrollHeight, scrollTop: $body.scrollTop() - scrollHeight}, 300)
    })
  </script>