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 ...
随机推荐
- FLASH-CH32F203替换STM32F103 FLASH快速编程移植说明
因CH32F203 相对于STM32 flash 操作多了快速编程模式,该文档说明主要目的是为了方便客户在原先ST 工程的基础上实现flash 快速编程模式的快速移植. 1.在stm32f10x.h ...
- springcloud 09 spring cloud gateway01 基本介绍
官网:https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.2.1.RELEASE/reference/html/ 1. ...
- 云端智创 | 批量化生产,如何利用Timeline快速合成短视频?
本文内容整理自「智能媒体生产」系列课程第三讲:开发者实战,由阿里云智能视频云技术专家分享云剪辑Timeline的功能及使用方法.云剪辑OpenAPI的使用流程.短视频批量生产的基本原理以及使用Time ...
- Servlet HTTP Request Response笔记
# 今日内容: 1. Servlet 2. HTTP协议 3. Request## Servlet: 1. 概念 2. 步骤 3. 执行原理 4. 生命周期 ...
- 自抗扰(ADRC)控制原理及控制器设计
https://blog.csdn.net/weixin_43487974/article/details/127163824?spm=1001.2101.3001.6650.2&utm_me ...
- 学习Java Day22
今天学习了如何在包中增加类,想要将包放入类中,就必须将包的名字放在源文件的开头,即放在定义这个包中各个类的代码之前
- ES6的Set详解
数组去重 let arr = [ 1,2,3,4,5,3,2 ] // 数组去重 // 方法一 let newArr = [new Set(arr)] console.log(newArr); // ...
- axios实现跨域的问题 vue实现跨域
第一次写博客,主要是记录自己的一些新的,不好的地方忘各位多多指点,请不要吐槽: 按踩坑顺序叙述.本人对http了解太少,所以坑踩得较多. 1.开始进行跨域时,知道vue2.0官方推荐axios进行aj ...
- Luogu P3919 【模板】可持久化线段树 1(可持久化数组)
板子,正好温习一下主席树的写法 记得数组开 \(32\) 倍!! \(Code\) #include<cstdio> using namespace std; const int N = ...
- MATH026th: 《古今算学丛书》目录
http://aiguji.net/2202.html 出版时间: 光绪二十四年(1898)上海算学书局据微波榭本等石印 <古今算学丛书>,刘铎辑,有光绪二十四年(1898)上海算学书局石 ...