input聚焦時，滾動至可視區域

北辰狼月發表於2018-12-12

這裡的程式碼來自vux，覺得vux處理得很好，在此記錄一下。
當我們在手機上填表單的時候，我們會希望正在填的input或者textarea會自動滾動至可視區域，方便我們邊填寫邊檢視內容。以前我的做法是，獲取元素，然後手動設定它距離頂部的高度，這種方法可行，但顯得麻煩而笨重。檢視了一下vux的原始碼，發現有一個直接的方法就可以做到這種效果，就是scrollIntoViewIfNeeded,這裡分享一下它的寫法。

mounted () {
    window.addEventListener('resize', this.scrollIntoView)
},
methods: {
    // 鍵盤彈出，頁面重繪，將獲得焦點的元素滾動至可視區域內
    scrollIntoView (time = 0) {
      // ios自帶調整，所以不管
      if (/iphone/i.test(navigator.userAgent)) {
        // return
      }
      if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
        setTimeout(() => {
          document.activeElement.scrollIntoViewIfNeeded(true)
        }, time)
      }
    },
}

簡單明瞭，這裡就不做解釋了，我們只需知道scrollIntoViewIfNeeded Api的作用，https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewIfNeeded，這是它的官方網址。
另外，建議將此方法封裝至mixins裡面，這樣在所需的頁面直接引入即可。

相關文章