scrollIntoView()方法将元素滚动到浏览器窗口的可见区域
TIPS:容器可滚动时才有用!
语法
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); //布尔参数
element.scrollIntoView(scrollIntoViewOptions); //对象参数
语法参数
alignToTop | [可选],目前之前这个参数得到了良好的支持 |
---|---|
true | 元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是默认值 |
false | 元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}。 |
scrollIntoViewOptions | [可选],目前这个参数浏览器对它的支持并不好,可以查看下文兼容性详情 |
---|---|
behavior | [可选]定义过渡动画。"auto","instant"或"smooth"。默认为"auto"。 |
block | [可选] "start","center","end"或"nearest"。默认为"center"。 |
inline | [可选] "start","center","end"或"nearest"。默认为"nearest"。 |
示例
var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
scrollIntoView()方法将元素滚动到浏览器窗口的可见区域的更多相关文章
- scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动,还有水平滚动
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...
- h5之scrollIntoView控制页面元素滚动
如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...
- selenium中元素操作之浏览器窗口滚动&网页日期控件操作(js操作)(五)
js的滚动条scrollIntoView() Arguments[] - python与js之间的羁绊 1.移动到元素element对象的“底端”,与当前窗口的“底部”对齐: driver.execu ...
- scrollIntoView将指定元素定位到浏览器顶部,底部,中间
var element = document.getElementById("box"); element.scrollIntoView();//顶部 element.scroll ...
- JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...
- jquery 获取浏览器窗口的可视区域高度 宽度 滚动条高
原文:http://www.open-open.com/code/view/1421827925437 alert($(window).height()); //可视区域高度 alert($(docu ...
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕,相对浏览器窗口,相对文档的坐标详解
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- selenium_webdriver(python)获取元素属性值,浏览器窗口控制、网页前进后退,title/url打印
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-s ...
随机推荐
- KingbaseES函数三态
理解函数的三态1 VOLATILE: volatile函数没有限制,可以修改数据(如执行delete,insert,update), 使用同样的参数调用可能返回不同的值. STABLE: 不允许修改数 ...
- Vue29 $nextTick
https://www.jianshu.com/p/f1906903b609 1 介绍 Vue 在修改数据之后,视图不会立即更新,而是等待同一事件循环中的所有数据变化完成之后,再统一进行视图更新.而 ...
- Gitee + Sourcetree 配置公钥 SSH
设置前提 安装Git Git下载 安装sourceTree sourceTree下载 gitee账号 gitee官网 Git设置公钥 1.在安装好 sourcetree 后 点击操作选择在终端中打开 ...
- 服务调用OpenFeign
1.介绍 ①什么是OpenFeign OpenFeign是在Feign的基础上进行了加强 使用在Client-Consuemr(消费者客户端) Fiegn是一个声明式的Web服务客户端,让编写Web服 ...
- Mybatis Plus (特性、快速入门、日志、CRUD)
Mybatis plus 可以节省很多的工作,所有的CRUD JPA yk-mapper Mybatis plus 偷懒的 简介: MyBatis-Plus(opens new window)(简称 ...
- noip2020模拟赛 背包 (knapsack)
题目 区间 \(01\) 背包 \(1 \le l_i \le r_i \le n \le 20000,1 \le q \le 100000,1 \le m_i \le 500, 1 \le w_i ...
- 题解 CF17201 A~D2
A 先约分,显然答案必然是 0 或 1 或 2 相等为 0,主要考虑 1 或 2 的情况. 假设 \(a>b\),令 \(c = a/b\),如果 \(c\) 为整数答案为 \(1\),否则为 ...
- LeetCode-2043 两数相加题解
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/simple-bank-system 题目描述 你的任务是为一个很受欢迎的银行设计一款程序,以自动 ...
- LeetCode-825 适龄的朋友
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/friends-of-appropriate-ages 题目描述 在社交媒体网站上有 n 个用户. ...
- Jmeter 常用命令 之 CLI模式
一.Jmeter的非GUI模式命令(即CLI模式command line) 命令: 命令参数 命令释义 -n 设置命令行模式 -t 指定JMX脚本路径参数为:JMX脚本路径,若非当前目录需用全路径或相 ...