scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动，还有水平滚动
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 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动，还有水平滚动的更多相关文章
- JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...
- js检测页面上一个元素是否已经滚动到了屏幕的可视区域内
应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...
- jquery 获取浏览器窗口的可视区域高度 宽度 滚动条高
原文:http://www.open-open.com/code/view/1421827925437 alert($(window).height()); //可视区域高度 alert($(docu ...
- js 判断一个元素是否在滚动的可视区域内，不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
- selenium中元素操作之浏览器窗口滚动&网页日期控件操作（js操作）（五）
js的滚动条scrollIntoView() Arguments[] - python与js之间的羁绊 1.移动到元素element对象的“底端”,与当前窗口的“底部”对齐: driver.execu ...
- scrollIntoView将指定元素定位到浏览器顶部，底部，中间
var element = document.getElementById("box"); element.scrollIntoView();//顶部 element.scroll ...
- Vue-懒加载(判断元素是否在可视区域内)
上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) ...
- 如何判断元素是否在可视区域内--getBoundingClientRect
介绍 Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置. 根据MDN文档 getBoundingClientRect 方法返回的是一个DOMRect ...
- jq、js判断元素是否在可视区域内
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> ...
随机推荐
- nginx中rewrite flag
rewrite 正则表达式 新URI [flag]; [flag] 选项用于调控重写的行为,它的取值可能是: last:重写完成后,会停止继续处理当前区块所有属于ngx_http_rewrite ...
- NOIpDairy
Day 0 水水比赛 Day 1 写写Dp Part1:Dp基础练习 [HNOI2002]公交车路线 秒切,点数这么少,N这么大,目测O(N)+暴力更新 5min写完 P3842 [TJOI2007] ...
- springMVC常用知识点的整理
[spring boot]第3篇:spring boot 进行 web 开发 forward和redirect的区别是什么 Spring MVC中redirect重定向3种方式 =========== ...
- Educational Codeforces Round 55 (Rated for Div. 2)E
题:https://codeforces.com/contest/1082/problem/E 题意:给出n个数和一个数c,只能操作一次将[L,R]之间的数+任意数,问最后该序列中能存在最多多少个c ...
- Xshell便捷设置实现linux复制粘贴
说明:在window系统中,Ctrl+C是复制的快捷键,Ctrl+V是粘贴的快捷键,但在xshell中,Ctrl+C 代表着中断当前指令. 解决办法如下: 1. 使用xshell中的复制粘贴快捷键复 ...
- Linux c 操作MySQL
#include <mysql/mysql.h>#include <stdio.h>#include <stdlib.h>int main() { MYSQL *c ...
- 实验报告8 AC+Fit AP组网通过三层网络注册（DHCP Option 43）
实验报告8 课程名称 无线网络与安全技术 实验名称 AC+Fit AP组网通过三层网络注册(DHCP Option 43) 姓名 学号 班级 实 验 目 的 [实验目的] 了解AC+Fit AP跨 ...
- LGOJ2568 GCD
Description link 给定整数\(n\),\(1 \leq x,y \leq n\)且\(gcd(x,y)\)为质数的\((x,y)\)的对数 \[1\leq n\leq 10^7\] S ...
- ORs-4-Enhanced Role of OR Gene Loss (Pseudogenization) in Birds
Enhanced Role of OR Gene Loss (Pseudogenization) in Birds 1.因为文献已经证明(a)基因缺失和得到对于进化有影响,(b)大的基因家族对进化影响 ...
- 自定义控件 监控宿主activity的生命周期
使用不显示的fragment来监控activity生命周期,fragment生命周期基本上跟随宿主activity变化.我们通过fragment的生命周期就可以知到activity的生命周期 我们自定 ...