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里面,这样在所需的页面直接引入即可。
input聚焦时,滚动至可视区域的更多相关文章
- 移动端,input、textarea滚动至可视区域
1.一般情况下 在移动端,点击input框之后,会弹出输入键盘.而内容input的内容也会自动滚动到可视区域内. 2.当父元素设置了overflow属性之后 在设置了overflow属性之后,点击in ...
- vue input聚焦时,滚动至可视区域
这里的代码来自vux,觉得vux处理得很好,在此记录一下.当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是,获 ...
- js滚动及可视区域的相关的操作
element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClie ...
- js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
- 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 ...
随机推荐
- python_17_数据运算
#//取整除,返回商的整数部分 print(9//2) print(10/3.3) print(10//3.0) #<>与!=都为不等于 #and 与 例(a and b) #or 或 # ...
- 深入浅出:了解JavaScript的六种继承
了解继承前我们需要了解函数的构造,方便我们理解. 常见六种继承方式: 1.原型继承call和apply: 2.原型拷贝:循环父函数protype的key值=子函数prototype的key值: 3.原 ...
- Vue项目中遇到的一些问题总结
一.开发环境使用Ajax请求,报错 网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 chan ...
- SummerVocation_Leaning--java动态绑定(多态)
概念: 动态绑定:在执行期间(非编译期间)判断所引用的对象的实际类型,根据实际类型调用其相应的方法.如下例程序中,根据person对象的成员变量pet所引用的不同的实际类型调用相应的方法. 具体实现好 ...
- 【线性基 集合hash】uoj#138. 【UER #3】开学前的涂鸦
还需要加强分析题目特殊性质,设计对应特殊算法,少想多写大力dfs剪枝不要管MLETLE直接上的能力 红包是一个有艺术细胞的男孩子. 红包由于NOI惨挂心情不好,暑假作业又多,于是他开始在作业本上涂鸦. ...
- mysql 5.7 编译安装脚本。
此脚本尽量运行在centos 服务器上面,用于编译安装mysql 5.7 将此脚本和相应的软件 都放到/usr/local/src 目录下面 由于不能上传附件 所以需要把cmake-3.9.6.ta ...
- Linux企业生产环境用户权限集中管理项目方案案例
企业生产环境用户权限集中管理项目方案案例: 1 问题现状 当前我们公司里服务器上百台,各个服务器上的管理人员很多(开发+运维+架构+DBA+产品+市场),在大家登录使用Linux服务器时,不同职能的员 ...
- Session 会话保持
本文将详细讨论session的工作机制并且对在Java web application中应用session机制时常见的问题作出解答 一.术语session session,中文经常翻译为会话,其本来的 ...
- Centos 6版本Device eth0 does not seem to be present,delaying initialization.故障处理
1.1 故障现象 2019年06月14日晚上,公司项目组说有台业务服务器连接不上,比较着急,我通过vpn拨入的方式远程登录到管理控制台查看发现网卡没有获取到IP地址,我尝试重启来重新启动,重启的时候 ...
- CyclicBarrier源码分析
CyclicBarrier是通过ReentrantLock(独占锁)和Condition来实现的.下面,我们分析CyclicBarrier中3个核心函数: 构造函数, await()作出分析. 1. ...