这里的代码来自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. ValueError: The truth value of an array with more than one element is ambiguous. Use a.any() or a.all()

    https://blog.csdn.net/ztf312/article/details/50708302 报错原因: Numpy对逻辑表达式判别不清楚,它可以返回False如果等号两边两个式子是数值 ...

  2. Cocos2d-x之物理引擎

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 在很多的游戏设计中一般都会涉及和模拟到真实的物理世界.然而游戏中模拟真实世界的物理会很复杂.使用已经写好的物理引擎会用很大的帮助和便利.  ...

  3. python-前端Jquery

    Jquery 高级版javascript 提供了更加便利的js使用方式 楔子 需求二:将上面的li标签实现隔行换色效果 js代码 <script> var obj = document.g ...

  4. 《穷爸爸富爸爸——Cashflow》

    读<穷爸爸富爸爸>大约两年前了,当时对理财没什么概念,除了支付宝,就是京东小金库,哪个利率高就存哪个里.记忆中除了感觉这应该是有一定经济基础的人通常做的事,工薪阶级的自己还未达标,工资除了 ...

  5. 组件化框架设计之阿里巴巴开源路由框架——ARouter原理分析(一)

    阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 背景 当项目的业务越来越复杂,业务线越来越多的时候,就需要按照业 ...

  6. Libgdx中TextButton的一些思考

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/caihongshijie6/article/details/37566183         由于有 ...

  7. HTTPS 301错误码 以及 SSL错误

    301 redirect: 301 代表永久性转移(Permanently Moved) 解决方法:修改请求 http 改为 https PHP通过cURL访问https时出现SSL certific ...

  8. NULL合并操作符??

    参考官方手册: /** * NULL合并操作符 ?? */ // $a, $b, $c都未声明和定义 var_dump($a??$b??$c); // NULL // $a为数组,$b为100,$c为 ...

  9. redis基础及基本命令

    什么是redis Redis是一个Key-value存储系统,redis提供了丰富的数据结构,包括string(字符串),list(列表),sets(集合),ordered set(有序集合),has ...

  10. Rsync备份服务实战

    目录 Rsync备份服务实战 一.Rsync 二.rsync的应用场景 1.Rync的数据同步模式 2.rsync的三种模式 三.rsync配置服务端客户端 四.rsync实战 实战一 报错解决方法: ...