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. python实现图书管理系统

    # 用户注册 def logon(): print("欢迎来到图书管理系统注册页面~") username = input("请输入用户名:") if len( ...

  2. web标准介绍

    web标准介绍 web标准: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web标准规范的分类:结构标准.表现标准.行为标准. 结构:html.表示:cs ...

  3. 创建Git仓库

    创建Git仓库 一.什么是版本仓库 什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能 ...

  4. mysql group_concat和find_in_set的使用

    原先sql获取角色对应的权限信息: select a.*, group_concat(b.auth_name) as auth_name from sh_role a left join sh_aut ...

  5. JS事件高级

    1. 注册事件(绑定事件) 1.1注册事件概述 1.2 addEventListener 事件监听方式 1.3 attachEvent 事件监听方式 1.4 注册事件兼容性解决方案 2. 删除事件(解 ...

  6. gcc -l：手动添加链接库

    链接器把多个二进制的目标文件(object file)链接成一个单独的可执行文件.在链接过程中,它必须把符号(变量名.函数名等一些列标识符)用对应的数据的内存地址(变量地址.函数地址等)替代,以完成程 ...

  7. SQL注入常用函数（注入小白的学习笔记）

    在盲注的情况下,往往需要一个一个字符的去猜解,即过程中需要截取字符串 在这里整理了一下一些常用函数 由于现阶段学习不够深入,整理分类不清楚具体,不过博主会慢慢进行完善 user() 查询当前数据库用户 ...

  8. 填平新版本Xcode安装插件不成功的坑

    一般情况下,安装xcode不成功现象基本上都出现在更新xcode或者重装之后出现的情况,下面原理性德东西,我就不赘述了,度娘上很容易看到,通过这段只是希望大家花费尽量少得时间将xcode插件安装成功. ...

  9. smooth curve|population|sample

    Distribution Shapes 由直方图到 smooth curve   1.this distribution of heights is bell shaped(or mound shap ...

  10. 微软不将《帝国时代》终极版上架Steam的原因到底是什么？

    毋庸置疑的是,<帝国时代>绝对是一款经典游戏.作为一款RTS名作,在过去的20年时间中<帝国时代>销量超过2000万部.数以千万计的玩家都沉溺于这款游戏中,<帝国时代&g ...