Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内

element.scrollIntoView();  // 等同于element.scrollIntoView(true)

element.scrollIntoView(alignToTop);  // Boolean型参数  true 元素的顶端与可视区域顶端对齐，（相当于{block: "start"}） false 元素底端将与可视区域底端对齐（相当于{block: "end"}）

element.scrollIntoView(scrollIntoViewOptions);  // Object型参数 behavior: "auto"  | "instant" | "smooth"，behavior这个选项决定页面是如何滚动的，auto与instant都是瞬间跳到相应的位置，而smooth就是有动画的过程；block:"start" | "end"

===================================================================

element.scrollIntoView() 方法不但可以引起页面的垂直滚动，也可以引起页面的水平滚动，这个是合理的

实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

		div { height: 1500px; width: 150%; background: #ddd; margin: 20px auto; border: 1px solid #aaa; }

		p { position: relative; }

		#link { position: absolute; right: -200px; }

    </style>

</head>

<body>

    <div id="div1"></div>

    <div id="div2"></div>

    <p><a id="link">aaaa</a>占位符占位符占位符</p>

    <div id="div3"></div>

    <script>

        function aaa() {

            var element = document.getElementById("link");

            element.scrollIntoView({ block: "end", behavior: "smooth" });

        }

        setTimeout(function () {

            aaa();

        }, 2000)

    </script>

</body>

</html>

　　效果如下

另外，element.scrollIntoView()还会引起一些看似诡异但情理上说的过去的现象，比如 element是不可见的，将element放到overflow:hiden的容器或者将element设置为visibility: hidden;会改变原有布局

例如

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

		div { height: 1500px; width: 150%; background: #ddd; margin: 20px auto; border: 1px solid #aaa; }

		p { white-space: nowrap; width: 200px; text-overflow: ellipsis; overflow: hidden; }

		#link { visibility: hidden; }

    </style>

</head>

<body>

    <div id="div1"></div>

    <div id="div2"></div>

    <p>

        占位符占位符占位符占位符<a id="link">aaaa</a>占位符占位符占位符

    </p>

    <div id="div3"></div>

    <script>

        function aaa() {

            var element = document.getElementById("link");

            element.scrollIntoView({ block: "end", behavior: "smooth" });

        }

        setTimeout(function () {

            aaa();

        }, 2000)

    </script>

</body>

</html>

　　初始状态 #link在这个位置

scrollIntoView之后

　当我们改变容器的宽度再改回来，样式又恢复了

参考：

　　https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

　　https://www.jianshu.com/p/32bef36a68a0

　　

scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动，还有水平滚动的更多相关文章

  1. JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

    alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...

  2. js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

    应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...

  3. jquery 获取浏览器窗口的可视区域高度 宽度 滚动条高

    原文:http://www.open-open.com/code/view/1421827925437 alert($(window).height()); //可视区域高度 alert($(docu ...

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

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

  5. selenium中元素操作之浏览器窗口滚动&网页日期控件操作（js操作）（五）

    js的滚动条scrollIntoView() Arguments[] - python与js之间的羁绊 1.移动到元素element对象的“底端”,与当前窗口的“底部”对齐: driver.execu ...

  6. scrollIntoView将指定元素定位到浏览器顶部，底部，中间

    var element = document.getElementById("box"); element.scrollIntoView();//顶部 element.scroll ...

  7. Vue-懒加载(判断元素是否在可视区域内)

    上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) ...

  8. 如何判断元素是否在可视区域内--getBoundingClientRect

    介绍 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 根据MDN文档 getBoundingClientRect 方法返回的是一个DOMRect ...

  9. jq、js判断元素是否在可视区域内

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> ...

随机推荐

  1. c#学习笔记06——XML

    XML概述:eXtensible Markup Language,可扩展标记语言.网络应用开发的一项新技术.同HTML一样是一种标记语言,但是数据描述能力要强很多.XML具有描述所有已知未知数据的能力 ...

  2. 可视化---matplotlib

    中文乱码 # 解决matplotlib显示中文问题 # 指定默认字体 plt.rcParams[font.sans-serif]=['SimHei'] # 解决保存图像是负号'-'显示为方块的问题 p ...

  3. windows之anaconda导入torch失败和pip install命令执行read time out

    昨天用jupyter导入torch还好好的呢,今天用就不行了,先是ImportError: DLL load failed: 找不到指定的模块.再是No such comm target regist ...

  4. webstorm更换了项目启动后仍然是之前的项目（问题解决）

    1. 2.

  5. iOS 直接使用16进制颜色

    在做iOS开发时,一般我们会吸色,就是产品给的图我们一般会吸色,但是最近吸色时候,老大说有较大的颜色偏差,所以要求我们直接使用UI给出的额16进制颜色,你也可以搜索<RGB颜色值转换成十六进制颜 ...

  6. docker安装（centos-7）

    centos7安装docker:Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker .通过 uname -r 命令 ...

  7. pytorch函数之nn.Linear

    class torch.nn.Linear(in_features,out_features,bias = True )[来源] 对传入数据应用线性变换:y = A x+ b 参数: in_featu ...

  8. 2020 CCPC Wannafly Winter Camp Day1-F-乘法

    题目传送门 sol:二分答案$K$,算大于$K$的乘积有多少个.关键在于怎么算这个个数,官方题解上给出的复杂度是$O(nlogn)$,那么计算个数的复杂度是$O(n)$的.感觉写着有点困难,自己写了一 ...

  9. Java复习(五)接口与多态

    5.1接口 允许创建者规定方法的基本形式:方法名.参数列表以及返回类型,但不规定方法主体. 也可以包含基本数据类型的数据成员,但他们都默认为static和final 声明格式为 [接口修饰符]inte ...

  10. 4418开发板Android源码整体&单独编译

    内核缺省文件配置之后,Android 目录,运行一键编译脚本“build_android.sh”,如下图所示.注意:本篇文章基于iTOP-4418开发板,编译 Android 必须保证给 Ubuntu ...