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. 【总结笔记】全志平台 Linux ASOC 框架浅析

    ASOC 各部分框图示意 Platform 一般由 SOC 芯片原厂负责编写,主要涉及到 SOC 内部数字音频接口DAI(I2S)和 DMA 的寄存器配置. Codec 一般由硬件方案的驱动工程师或者 ...

  2. OPA-CH32x系列芯片OPA使用注意事项

    1 OPA运放基本功能说明 1.1 OPA引脚详细说明方式 说明方式1如下所示: OPN0.OPP0.OPO为OPA的第0通道 OPN0:OPA_0通道的N端 OPP0:OPA_0通道的P端 OPO: ...

  3. LeetCode_1. 两数之和

    写在前面 难度:简单 原文链接:https://leetcode-cn.com/problems/two-sum/ 题目  给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和 ...

  4. 为什么sleeping的会话会造成阻塞

    背景 客户反映HIS数据库每天22点后都会发生阻塞,阻塞的源头是一个sleeping的会话,越阻塞越多,只能通过手动KILL掉才能解决,十分不解为什么状态为sleeping的会话会造成阻塞. 现象 在 ...

  5. G - 逆序对的数量

    G - 逆序对的数量 原题链接 什么是逆序对? 简单来说,两个数比较,下标小的数反而大,两个数称之为逆序对如\({3,1}\)就是这么一个逆序对 归并排序 由于逆序对逆序的性质,我们可以联想到排序: ...

  6. Hibernate多表关系

    Hibernate多表关系 hibernate 一对多(多对一) 创建实体 配置ORM映射文件 创建测试文件 双方关系维护 级联操作 外键的维护权管理 双方关系维护.级联操作.外键维护权之间的关系 一 ...

  7. 物语(monogatari)

    \(Description\) 某一天,少年邂逅了同病相连的IA.见面后,IA一把牵起少年的手,决定和他一起逃离部落,离开这个无法容身的是非之地. 要逃离部落,少年和IA就需要先选择一条耗时最少的路线 ...

  8. 基于C++的OpenGL 12 之多光源

    1. 引言 本文基于C++语言,描述OpenGL的多光源 前置知识可参考: 基于C++的OpenGL 11 之投光物 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com) 笔者这里不过多描 ...

  9. 树莓派lite安装桌面

    sudo apt update sudo apt install xorg -y sudo apt install lxde openbox -y sudo apt install pix-icons ...

  10. Cannot invoke "java.sql.Connection.prepareStatement(String)" because "conn" is null问题解决

    HTTP状态 500 - 内部服务器错误 类型 异常报告 消息 Cannot invoke "java.sql.Connection.prepareStatement(String)&quo ...