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. mybatis的XML配置文件中，typeHandler、jdbcType、javaType的使用

    1.前言 typeHandler.jdbcType.javaType都是用来处理java数据类型和jdbc数据库数据类型的转换问题,但在xml的不同位置使用需要注意引号使用问题. 2.在xml的不同位 ...

  2. Linux中的各种文件类型

    Linux中有一句话:一切皆是文件 1.普通文件( -       regular file ) (1).文本文件 文件中的内容是由文本构成的,文本指的是ASCII码字符.文件里的内容本质上都是数字( ...

  3. 题解-------CF372C Watching Fireworks is Fun

    传送门 一道有趣的DP 题目大意 城镇中有$n$个位置,有$m$个烟花要放.第$i$个烟花放出的时间记为$t_{i}$,放出的位置记为$a_{i}$.如果烟花放出的时候,你处在位置$x$,那么你将收获 ...

  4. AddressUtils

    package com.ruoyi.common.utils; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import com. ...

  5. shell_分析服务器日志

    1.查看有多少个IP访问: awk '{print $1}' log_file|sort|uniq|wc -l 2.查看某一个页面被访问的次数 grep "/index.php" ...

  6. 实战_4：UI开发工具-WindowBuilder

    介绍: WindowBuilder是谷歌开发的,开发java图形界面的工具,是一个eclipse插件. WindowBuilder支持开发多种形式的图形界面:SWT/JFace.Swing.GWT 安 ...

  7. BaseAdapter教程(1) 最简单地使用BaseAdapter

    Adapter就是适配器,而设计模式里也有Adapter Pattern. 而BaseAdapter就是设计模式里的思维,把一些不相关的东西放进去,经过适配器,最终都会出产同一样的东西. 就像Base ...

  8. poj-3659 Cell Phone Network（最小支配集+贪心）

    http://poj.org/problem?id=3659 Description Farmer John has decided to give each of his cows a cell p ...

  9. git 学习系列（一）

    目录 git 简介 git的升级 建立仓库 克隆仓库 查看主机名 查看仓库初始状态 将文件提交到暂存区 查看修改详情 提交修改 查看修改记录 查看个人配置信息(在 .gitconfig 文件中) 查看 ...

  10. python通过ssh读写远程数据

    1.适用场景 需要读取(写)多台远程机器下的一个或多个文件,如果要通过 os.system('scp ......')来完成就必须配置免密登陆,比较麻烦 2.准备工作, 安装依赖 pip instal ...