scrollIntoView和scrollIntoViewIfNeeded

godruoyi 发布于2019-08-21 18:28 / 1596人阅读

摘要：如果为，元素的底端将和其所在滚动区的可视区域的底端对齐。根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。

[TOC]

scrollIntoView系列

移动web页面，input获取焦点弹出系统虚拟键盘时，偶尔会出现挡住input的情况，尽管概率不大，但是十分影响用户体验。

scrollIntoView

element.scrollIntoView(alignToTop);

alignToTop

Boolean

如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。

如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。

scrollIntoViewIfNeeded

Element.scrollIntoViewIfNeeded(opt_center)

opt_center

Boolean 默认true

如果为true，则元素将在其所在滚动区的可视区域中居中对其。

如果为false，则元素将与其所在滚动区的可视区域最近的边缘对齐。根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的底部边缘将与可见区域的底部边缘对准。

推荐使用 scrollIntoViewIfNeeded

代码实例

 $("input").on("click", function () {
            var target = this;
            // 使用定时器是为了让输入框上滑时更加自然
            setTimeout(function(){
               // target.scrollIntoView(true);
               target.scrollIntoViewIfNeeded(true); // 推荐使用
            },100);
        });

参考:

https://github.com/justjavac/...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90499.html

前端常用代码片段(五)

摘要：当运行时，如果不为，则将超时函数推送到事件队列，并且函数退出，从而使调用堆栈清零。因此，该方法从头到尾不经过直接递归调用即可处理，因此调用堆栈保持清晰，无论迭代次数如何。前端常用代码片段(一) 点这里前端常用代码片段(二) 点这里前端常用代码片段(三) 点这里前端常用代码片段(四) 点这里 1.tap事件点透问题？问题点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触...

MoAir 2019-08-23 14:41 评论0 收藏0
一个html标签到底包含了多少信息(1)

摘要：先来看一段代码可以看到很多，来整理一下，总共有三大类我自己分的，没有科学依据除了一些私有属性方法比如的私有属性等和一些空的属性根据类型又分为了几个小分类普通属性样式属性操作属性其他对象属性我不知道的类型下一节详细分析先来看一段代码： var dom = document.querySelector(body); for(var i in dom){ console.log(i...

lylwyy2016 2019-08-19 18:31 评论0 收藏0
关于input的一些问题解决方法分享

摘要：输入框首尾清除空格在中监听键盘事件移动端底部被弹出的键盘遮挡输入框是通过一直放在页面底部，当点击进行输入的时候，就会出现如下图片情况有的机型会遮挡一些。前言 input是我们接受来自用户的数据常用标签，在前端开发中，相信每个人都会用到这个标签，所以在开发过程中也时候也会遇到一些问题，本文的内容是我在跟input相爱相杀过程中产生的，在此记录分享一下。如果喜欢的话可以点波赞/关注，支持...

骞讳护 2019-08-22 17:12 评论0 收藏0
关于input的一些问题解决方法分享

摘要：输入框首尾清除空格在中监听键盘事件移动端底部被弹出的键盘遮挡输入框是通过一直放在页面底部，当点击进行输入的时候，就会出现如下图片情况有的机型会遮挡一些。前言 input是我们接受来自用户的数据常用标签，在前端开发中，相信每个人都会用到这个标签，所以在开发过程中也时候也会遇到一些问题，本文的内容是我在跟input相爱相杀过程中产生的，在此记录分享一下。如果喜欢的话可以点波赞/关注，支持...

vibiu 2019-08-29 15:23 评论0 收藏0