input聚焦时,滚动至可视区域

这里的代码来自vux,以为vux处理得很好,在此记录一下。
当咱们在手机上填表单的时候,咱们会但愿正在填的input或者textarea会自动滚动至可视区域,方便咱们边填写边查看内容。之前个人作法是,获取元素,而后手动设置它距离顶部的高度,这种方法可行,但显得麻烦而笨重。查看了一下vux的源码,发现有一个直接的方法就能够作到这种效果,就是scrollIntoViewIfNeeded,这里分享一下它的写法。ios

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里面,这样在所需的页面直接引入便可。iphone

相关文章
相关标签/搜索