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

    JSON是javascript的一个子集,利用js中的一些儿模式来表示结构化数据.不是只有javascript才使用JSON,JSON是一种数据格式,很多编程语言都有针对JSON的解析器和序列化器. ...

  2. python剑指offer 实现树的子结构

    题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) # -*- coding:utf-8 -*- # class TreeNode: # def __ ...

  3. PyCharm 2018.1 软件汉化

    下载汉化包 链接: https://pan.baidu.com/s/1buLFINImW_3cNzP8HsB4cA 密码: fqpu 安装汉化包 找到pycharm安装目录 直接把刚刚下载的汉化包复制 ...

  4. shell与python判断文件是否存在

    日常运维中,我们会存在每日备份的现象,针对这一种情况可能会要求监控文件是否存在.比较笨拙的方法就是登录上服务器到某个路径下查看文件是否存在,除此之外,我们可以利用shell或者python来编写监控文 ...

  5. MySQL存储引擎MyISAM与InnoDB的区别比较

    使用MySQL当然会接触到MySQL的存储引擎,在新建数据库和新建数据表的时候都会看到. MySQL默认的存储引擎是MyISAM,其他常用的就是InnoDB了. 至于到底用哪种存储引擎比较好?这个问题 ...

  6. javascript 计算倒计时

    function timeDown(second) { var month = '', day = '', hour = '', minute = ''; if (second >= 86400 ...

  7. Python数据类型的用法

    字符串的用法 res = 'hellow,world' print(res) #res.显示的都是它的方法,下划线的除外 1 判断字符串的结尾字符,返回的值的布尔形式 endswith 判断字符串的开 ...

  8. [BZOJ2331]地板(插头DP)

    Description lxhgww的小名叫"小L",这是因为他总是很喜欢L型的东西.小L家的客厅是一个的矩形,现在他想用L型的地板来铺满整个客厅,客厅里有些位置有柱子,不能铺地板 ...

  9. GIt-恢复进度

    继续暂存区未完成的实践 经过了前面的实践,现在DEMO版本库应该处于master分支上,看看是不是这样. $ cd /path/to/my/workspace/demo $ git status -s ...

  10. GBDT算法简述

    提升决策树GBDT 梯度提升决策树算法是近年来被提及较多的一个算法,这主要得益于其算法的性能,以及该算法在各类数据挖掘以及机器学习比赛中的卓越表现,有很多人对GBDT算法进行了开源代码的开发,比较火的 ...