这里的代码来自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

vue input聚焦时,滚动至可视区域的更多相关文章

  1. 移动端,input、textarea滚动至可视区域

    1.一般情况下 在移动端,点击input框之后,会弹出输入键盘.而内容input的内容也会自动滚动到可视区域内. 2.当父元素设置了overflow属性之后 在设置了overflow属性之后,点击in ...

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

    这里的代码来自vux,觉得vux处理得很好,在此记录一下. 当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是, ...

  3. js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。

    前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...

  4. js滚动及可视区域的相关的操作

    element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClie ...

  5. ztree获取选中节点时不能进入可视区域出现BUG如何解决

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 的特点编辑 ● zTree v3.0 将核心代码按照功能进 ...

  6. 取消input聚焦时的边框,去除ios点击时,自动添加的底色效果

    /*去除ios点击时,自动添加的底色效果*/ -webkit-tap-highlight-color: rgba(, , , ); /*去除焦点框*/ outline:none;

  7. js scrollIntoView 滚动到元素可视区域

    老是忘记这个函数名,记录一下啊 // 滚动到可视区域 document.querySelector(".loading").scrollIntoView()

  8. ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力。

    ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力. 1.http://www.yangqq.com/jstt/css3/2017-08-08/787. ...

  9. js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

    应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...

随机推荐

  1. spring注解开发:ComponentScan组件扫描

    在使用xml方式配置时,我们只需要在xml中配置如下代码: <context:component-scan base-package="包名"></context ...

  2. [未解决]报错:ssh_exchange_identification: read: Connection reset by peer

    报错代码: ssh_exchange_identification: read: Connection reset by peer fatal: 无法读取远程仓库. 请确认您有正确的访问权限并且仓库存 ...

  3. 图推荐-基于随机游走的personrank算法

    转自http://blog.csdn.net/sinat_33741547/article/details/53002524 一 基本概念 基于图的模型是推荐系统中相当重要的一种方法,以下内容的基本思 ...

  4. leetcde-27-移除元素

    问题: package com.example.demo; public class Test27 { /** * 定义一个尾指针,该位置放置和val不同的元素, * 遍历数组,将不同的元素全部放置到 ...

  5. ogeek babyrop

    拖入ida 先用strncmp使一个随机数与输入比对,这里可以用\x00跳过strncmp 然后read()中的a1是我们输入\x00后的值 写exp from pwn import * sh=rem ...

  6. Python 的PIL,可以解决ImportError The _imagingft C module is not installed

    删除PIL相关文件 mv PIL /tmp   pip install Pillow 安装Pillow后, 可能还会发生KeyError的错误, 检查项目源码后发现是 Image 模块的save函数中 ...

  7. Ubuntu14.04搭建Boa服务

    1. 下载 boa 源码 : https://sourceforge.net/projects/boa/ 版本:boa-0.94.13.tar.gz 2. 在Ubuntu 下解压进入 [boa-0.0 ...

  8. Linux用户的基本操作3 (组的基本管理,用户提权)

    目录 组的基本原理 用户身份切换 5.用户身份提权 组的基本原理 组账户信息保存在/etc/group 和/etc/gshadow 两个文件中. /etc/group组账户信息 [root@zls ~ ...

  9. wxss 优先级

    外部元素>内部元素>id选择器>class  选择器>元素选择器

  10. @HttpEntity参数(怪异)

    1).在Controller中写 与@RequestBody请求体对应 @HttpEntity更强大,不光有请求体,还能获取请求头 @RequestMapping("/test02" ...