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
vue input聚焦时,滚动至可视区域的更多相关文章
- 移动端,input、textarea滚动至可视区域
1.一般情况下 在移动端,点击input框之后,会弹出输入键盘.而内容input的内容也会自动滚动到可视区域内. 2.当父元素设置了overflow属性之后 在设置了overflow属性之后,点击in ...
- input聚焦时,滚动至可视区域
这里的代码来自vux,觉得vux处理得很好,在此记录一下. 当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是, ...
- js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
- js滚动及可视区域的相关的操作
element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClie ...
- ztree获取选中节点时不能进入可视区域出现BUG如何解决
zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 的特点编辑 ● zTree v3.0 将核心代码按照功能进 ...
- 取消input聚焦时的边框,去除ios点击时,自动添加的底色效果
/*去除ios点击时,自动添加的底色效果*/ -webkit-tap-highlight-color: rgba(, , , ); /*去除焦点框*/ outline:none;
- js scrollIntoView 滚动到元素可视区域
老是忘记这个函数名,记录一下啊 // 滚动到可视区域 document.querySelector(".loading").scrollIntoView()
- ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力。
ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力. 1.http://www.yangqq.com/jstt/css3/2017-08-08/787. ...
- js检测页面上一个元素是否已经滚动到了屏幕的可视区域内
应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...
随机推荐
- linux 服务器,登录出现login incorrect
1.排查是否是登录用户的密码错误 2.查看本机电脑键盘是否有误 3.排查是否是服务器目录全是777权限 注意事项: 原因是您把系统中全部文件的权限改为的777 ,权限混乱,虽然现在可以访问,但是其他文 ...
- addr2line探秘 [從ip讀出程式中哪行出錯]
addr2line探秘 在Linux下写C/C++程序的程序员,时常与Core Dump相见.在内存越界访问,收到不能处理的信号,除零等错误出现时,我们精心或不精心写就的程序就直接一命呜呼了,Core ...
- Guava 开源工具的简单介绍
Guava 是一个 Google 的基于java1.6的类库集合的扩展项目,包括 collections, caching, primitives support, concurrency libra ...
- HttpClient 之 发送Https请求
HttpClient包是一个优秀的Http请求的开源jar. 本文Http工具类的封装基于HttpClient,封装后的工具类支持Https请求. 但是由于项目的需要快速的实现,以下代码还可能会有点过 ...
- centos7.3安装wordpress
一.安装并配置数据库 1.安装mariadb #yum install -y mariadb-server mariadb 2.启动数据库并设置开机自启#systemctl start mariadb ...
- docker概述与安装及运行容器
传统虚拟化 传统虚拟化步骤 1.安装虚拟化软件以及虚拟化的管理软件 2.创建虚拟机 3.给虚拟机安装os 4.在虚拟机内部不是应用(http.db之类的应用) 传统虚拟化的特点 1.VM与VM之间是完 ...
- java web中的get和post(笔记)
W3CSchool 在客户机和服务器之间进行请求-响应时,两种最常被用到的方法是:GET 和 POST. GET - 从指定的资源请求数据. POST - 向指定的资源提交要被处理的数据 GET 方法 ...
- elasticsearch 父子关系
ElasticSearch 中的Parent-Child关系和nested模型是相似的, 两个都可以用于复杂的数据结构中,区别是 nested 类型的文档是把所有的实体聚合到一个文档中而Parent- ...
- Nginx四层负载均衡
目录 Nginx四层负载均衡概述 Nginx如何配置四层负载均衡 使用nginx四层负载均衡实现tcp的转发 Nginx四层负载均衡概述 什么是四层负载均衡 四层负载均衡是基于传输层协议包来封装的(如 ...
- change all column to char
http://bluefrog-oracle.blogspot.com/2011/09/script-submitted-to-otn-to-altter.html Script to Alter v ...