zoukankan      html  css  js  c++  java
  • 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里面,这样在所需的页面直接引入即可。

  • 相关阅读:
    03-java实现双向链表
    04-java实现循环链表
    02-java实现单链表
    01-java实现动态数组
    安装mpi的那些坑
    gotoblas,mpich,hpl,hpcg的安装
    centos之hadoop的安装
    公告
    AFO之后……
    Codeforces Round #599 (Div. 2)的简单题题解
  • 原文地址:https://www.cnblogs.com/yky-iris/p/10109099.html
Copyright © 2011-2022 走看看