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()方法将元素滚动到浏览器窗口的可见区域的更多相关文章

  1. scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动,还有水平滚动

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...

  2. h5之scrollIntoView控制页面元素滚动

    如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...

  3. selenium中元素操作之浏览器窗口滚动&网页日期控件操作(js操作)(五)

    js的滚动条scrollIntoView() Arguments[] - python与js之间的羁绊 1.移动到元素element对象的“底端”,与当前窗口的“底部”对齐: driver.execu ...

  4. scrollIntoView将指定元素定位到浏览器顶部,底部,中间

    var element = document.getElementById("box"); element.scrollIntoView();//顶部 element.scroll ...

  5. JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

    alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...

  6. jquery 获取浏览器窗口的可视区域高度 宽度 滚动条高

    原文:http://www.open-open.com/code/view/1421827925437 alert($(window).height()); //可视区域高度 alert($(docu ...

  7. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

  8. 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

    1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...

  9. 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕,相对浏览器窗口,相对文档的坐标详解

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  10. selenium_webdriver(python)获取元素属性值,浏览器窗口控制、网页前进后退,title/url打印

    <span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-s ...

随机推荐

  1. Symbol.iterator 迷惑行为

  2. app实现外部浏览器打开链接

    需求:安卓和IOS开发的混合app.前端使用vue,vant2,安卓使用java,ios使用的object-c.实现效果:点击按钮,下载PDF附件,app跳转到手机外部浏览器,下载附件...... 1 ...

  3. C++练习5 对引用进行初始化

    1 #include <iostream> 2 using namespace std; 3 int main() 4 { 5 const int cInt = 3;//定义常量cInt并 ...

  4. 中南大学CSU2022-2023级C语言期中考试机试答案

    卡在出线概率了.40%,没想到遍历时反了,我去. 1.时钟加法 1 #include<stdio.h> 2 3 #include<string.h> 4 5 #include& ...

  5. CF750H New Year and Snowy Grid

    \(\text{Solution}\) 这个问题是不好判断的 考虑简单点的,\((1,1)\) 到 \((h,w)\) 是否连通 那么只要在最外围一圈 #(显然一些位置不能加),判断 \((h+1,n ...

  6. AHOI,但是初中组,2017-2018

    你觉得我这种彩笔像是能去做省选题的样子吗?=w= 合肥人,做初中的屑安徽题,很正常吧.AH 也不知道为啥搞啥市赛啊区赛啊省赛啊就挺离谱的反正摆烂人也不想打┓( ´∀` )┏ 2018 T1 签到题 / ...

  7. CCRD_TOC_2008年第11期

    中信国健临床通讯 2008年第11期(总第24期) 目 录   脊柱关节炎 1. 一项多中心.大型.随机.双盲.对照试验证实依那西普治疗AS的疗效优于柳氮磺吡啶 Braun J, et al. ACR ...

  8. 配置 Vite 自动导入 ElementPlus 组件、函数、Icons、样式

    使用 Vite 的自动导入的前提是项目是 TS 项目,JS 项目使用 Vite 自动导入不生效.安装以下 5 个包到 devDependencies: cnpm i -D unplugin-icons ...

  9. Solon2 与 Spring Boot 的区别

    1.与 Springboot 的常用注解比较 Solon 2.2.0 Springboot 2.7.8 说明 @Inject * @Autowired 注入Bean(by type) @Inject( ...

  10. TP框架在nginx中的配置

    TP框架配置中默认URL_MODEL=1,而Nginx默认是不支持PATHINFO的.如果我们只想跑起来tp框架,很简单,只需到更改TP配置,设置URL_MODEL=3(兼容模式).但是如果要让Ngi ...