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

這里的代碼來自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里面，這樣在所需的頁面直接引入即可。

原文來之https://www.cnblogs.com/yky-iris/p/10109099.html