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. 关于redis的使用总结

    简介 redis是一个开源的用c语言编写的数据库,但并不像常规的关系型数据库那样把数据存储在表中 , 而是像Java中的Map集合一样,存储的是一系列key=value键值对,redis属于NoSQL ...

  2. blocking（非阻塞）回调函数

    回调函数不会造成阻塞 function loop() { setTimeout(loop, 0) } loop 死循环 while(true)

  3. OutOfMemoryError异常

    1.Java堆溢出 Java堆用于存储对象实例,只要不断地创建对象,并且保证GC Roots到对象之间有可达路径来避免垃圾回收机制清除这些对象,就会在对象数量达到最大堆的容量限制后产生内存溢出异常. ...

  4. 93.QuerySet转换为SQL的条件：迭代，切片（指定步长），len函数，list函数，判断

    生成一个QuerySet对象并不会马上转换为SQL语句去执行. books = Book.objects.filter(pk=3) print(connection.queries) 打印出djang ...

  5. gulp自动化添加版本号并修改为参数格式

    问题: 当我们修改js和css文件时往往需要清除浏览器的缓存,否则有些效果就看不到更新过后的. 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会 ...

  6. hdu2896&&3065

    题:http://acm.hdu.edu.cn/showproblem.php?pid=2896 分析:ac自动机模板 注意细节,1.128个ascii码都要: 2.只要关键码含有只输出一个编号就行 ...

  7. 基础篇十：模块介绍（--with-help_random_index_module）

    配置语法: 下面开始配置: cd /etc/nginx/conf.d/default.conf

  8. Docker系列七: 使用Humpback管理工具管理容器(一款UI管理工具)

    Humpback 可以帮助企业快速搭建轻量级的 Docker 容器云管理平台,若将你的 Docker 主机接入到 Humpback 平台中,就能够为你带来更快捷稳定的容器操作体验. 功能特点 Web操 ...

  9. Datagridview 实现二维表头和行合并

    借鉴别人的,改了改,没用timer using System;using System.Collections.Generic;using System.ComponentModel;using Sy ...

  10. android多框架实现短视频应用、3D手势旋转、banner控件、指南针、智能管家等应用源码

    Android精选源码 android智能管家app源码 Android高仿拼多多分类列表 Android百度地图实例详解之仿摩拜单车APP RecyclerView的LayoutManager搭建流 ...