这里的代码来自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聚焦时,滚动至可视区域的更多相关文章

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

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

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

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

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

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

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

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

  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. 第七章 动态创建HTML内容

    javascript也可以改变网页的结构和内容 document.write()方法 可以方便快捷地把字符串插入到文档里 document.write("<strong>hell ...

  2. python_75_json与pickle序列化2

    import pickle def say(name):print('Hi!',name)#用完会释放,要想反序列化,要重新写上该函数 info={ 'name':'Xue Jingjie', 'ag ...

  3. TensorFlow 内置重要函数解析

    概要 本部分介绍一些在 TensorFlow 中内置的重要函数,了解这些函数有时候更加方便我们进行数据的处理或者构建神经网络. 这些函数如下:       tf.one_hot()     tf.ra ...

  4. 《坐热板凳》第九次团队作业:Beta冲刺与验收准备(第一天)

    <坐热板凳>第九次团队作业:Beta冲刺与验收准备 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https ...

  5. 一些常用的集合工具的代码块(缓慢更新XD,更新了多属性过滤:) )

    更新记录 虽然经常放鸽子,但是还是要记录一下更新 2017.8.30 更新了listToMap的方法,现在可以指定多个属性进行分组了,例如你要指定一个学生集合,按照名字和年龄相同的放在一组,现在只要调 ...

  6. 更改zabbix-server的端口

    1.前言zabbix-server的默认端口号是10051.如果存在端口号冲突,需要更改端口号. 以下为更改端口号的步骤. 2.更改配置文件 通常用安装包,也就是yum方式部署的话,其默认的配置文件是 ...

  7. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  8. 项目17-超详细“零”基础kafka入门篇

    分类: Linux服务篇,Linux架构篇   1.认识kafka 1.1 kafka简介 Kafka 是一个分布式流媒体平台 kafka官网:http://kafka.apache.org/ (1) ...

  9. Codeforces:68A-Irrational problem(暴力大法好)

    A- Irrational problem p Time Limit: 2000MS Memory Limit: 262144K 64bit IO Format: %I64d& %I64 De ...

  10. 在MAC下使用Robotframework+Selenium2【第一枪】robotframework安装步骤

    最近使用苹果的MAC Pro本本,感受着苹果系统的新鲜,确实让我手忙脚乱一阵,毕竟使用windows系统太长时间了,刚开始用MAC Pro确实感觉别扭,用了一段,发现MAC系统还不错,好了,转入正题. ...