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 ...
随机推荐
- C++迭代器种类与编译期间多态
迭代器分类 C++ STL 中根据移动能力将迭代器分成了 5 类: Input Iterator 输入迭代器,只支持 operator++ 操作. Output Iterator 输出迭代器,只支持 ...
- 1月9日内容总结——linux相关知识简介、虚拟化软件vmware、远程链接工具xshell
目录 一.linux常见岗位 二.计算机的种类与服务器 三.服务器品牌 四.服务器内部组成 五.服务器磁盘阵列 六.linux简介 1.什么是linux 2.linux发展史 3.Linux系统的特点 ...
- KingbaseES集群故障分析案例
某商业银行生产系统KingbaseES读写分离集群主库出现故障,导致集群主备发生切换.客户要求说明具体的原因. KingbaseES读写分离集群基本信息: KingbaseES集群信息 操作系统 Li ...
- ASP.NET Core - 入口文件
1. 入口文件 一个应用程序总有一个入口文件,是应用启动代码开始执行的地方,这里往往也会涉及到应用的各种配置.当我们接触到一个新框架的时候,可以从入口文件入手,了解入口文件,能够帮助我们更好地理解 ...
- CAS 悲观锁 乐观锁
前面的偏向锁,轻量级锁,重量级锁都是悲观锁, 都会认为必须要对操作对象进行互斥访问,不然就会产生异常, 所以线程只供一个线程使用,阻塞其他线程,是悲观的 在某些情况下,同步的耗时远大于线程切换的时间, ...
- evil 控制窗口大小,比快捷键方便
下面是vim原本的支持的键 可以用于 emacs evil ,evil 用这个比用快捷键还方面些 1.纵向调整 :res[ize] num 指定当前窗口为num列num行 :res[ize] +num ...
- print()、转义字符、标识符和保留字、变量、数据类型、类型转换
安装 1.安装对应版本的Python,并进行相应的测试 2.安装对应版本的PyCharm并配置相关的内容 print()函数 输出内容是数字 输出内容是字符串 输出的内容是含有字符串的运算符的表达式 ...
- Centos7搭建hadoop3.3.4分布式集群
目录 1.背景 2.集群规划 2.1 hdfs集群规划 2.2 yarn集群规划 3.集群搭建步骤 3.1 安装JDK 3.2 修改主机名和host映射 3.3 配置时间同步 3.4 关闭防火墙 3. ...
- 跟女朋友介绍十个常用的 Python 内置函数,她夸了我一整天
内置函数是什么 了解内置函数之前,先来了解一下什么是函数 将使用频繁的代码段进行封装,并给它起一个名字,当我们使用的时候只需要知道名字就行 函数就是一段封装好的.可以重复使用的代码,函数使得我们的程序 ...
- node.js 中删除,修改等接口
1.首先是引入模块.闯将服务器,设置路由等 二.查询员工接口 三.添加员工接口 四.删除员工接口 五.修改员工接口