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代码)

    1 在概率统计中,我们针对某个事件当中各个样本发生的概率的频率进行统计,用一个函数的形式写出的这个概率的频率函数就叫做分布函数. 2 分布函数顾名思义,就是某个连续事件发生频率的汇总表示.再直白一点儿 ...

  2. typescript--介绍ts

    TypeScript 介绍 TypeScript 是什么 TypeScript 是 JavaScript 的强类型版本.然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript 代码.由于最终 ...

  3. ubuntu16.04设置apt 阿里源

    sudo gedit /etc/apt/sources.listdeb http://mirrors.aliyun.com/ubuntu/ trusty main restricted univers ...

  4. iOS 清理文件缓存

    本文摘自:<msp的昌伟哥哥-iOS开发-清理缓存功能的实现>摘下来的目的就是为了能够学习.还望看到文章的同学,前往原创的博客园.感谢msp的昌伟哥哥的分享精神. 移动应用在处理网络资源时 ...

  5. mysql自定义函数统计订单状态:GET_ORDER_STATUS()

    DELIMITER $$ USE `local_hnyz`$$ DROP FUNCTION IF EXISTS `GET_ORDER_STATUS`$$ CREATE DEFINER=`root`@` ...

  6. 2)#ifndef和#pragma once

    #################################################################################################### ...

  7. OA项目-表结构

    ###############  新建APP并配置   ############### INSTALLED_APPS = [ ... 'apps.users.apps.UsersConfig', 'a ...

  8. php的header方法

    http://www.cnblogs.com/fengzheng126/archive/2012/04/21/2461475.html

  9. 3)小案例三,加乐前端入口index.php

    之前的代码没有什么改动,唯一改动的就是我在之前的目录结构中加了  index.php作为前端的入口文件 目前,我的文件目录关系是: 然后我的index.php代码内容是: <?php /** * ...

  10. Qt 使用自带的OpenGL模块开发程序

    QT中使用opengl .pro文件中添加 QT += opengl 1.使用指定版本的OpenGL如下使用opengl4.5调用方法,使用指定版本的接口,必须设备图形显示设备支持对应OpenGL版本 ...