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. socket模块实现网络编程及struct模块解决黏包问题

    目录 一.socket模块 1.简介 2.基于文件类型的套接字家族 3.基于网络类型的套接字家族 二.socket代码简介 三.socket代码优化 1.聊天内容自定义 2.让聊天循环起来 3.用户输 ...

  2. appium如何获取到APP的启动activity

    方法一: adb shell monkey -p 包名 -v -v -v 1 方法二: aapt dump bading apk所在路径\apk名字(或者直接把apk拖进命令行) 运行后的结果中以下两 ...

  3. ASP.NET6 + Mongo + OData

    准备工作 Docker环境 Mongo数据库 配置Mongo数据库 ASP.NET6 集成Mongo 安装MongoDB.Driver { "Logging": { "L ...

  4. Git03 自建代码托管平台-GitLab

    1 GitLab 简介 GitLab 是由 GitLabInc.开发,使用 MIT 许可证的基于网络的 Git 仓库管理工具,且具有wiki 和 issue 跟踪功能.使用 Git 作为代码管理工具, ...

  5. Python装饰器实例讲解(三)

    Python装饰器实例讲解(三) 本文多参考<流畅的python>,在此基础上增加了一些实例便于理解 姊妹篇 Python装饰器实例讲解(一),让你简单的会用 Python装饰器实例讲解( ...

  6. Backbone 网络-ResNet 论文解读

    摘要 残差网络(ResNet)的提出是为了解决深度神经网络的"退化"(优化)问题. 有论文指出,神经网络越来越深的时候,反传回来的梯度之间的相关性会越来越差,最后接近白噪声.即更深 ...

  7. 【雅礼联考DAY02】Magic

    #include<cstdio> #include<iostream> #include<cstring> #include<algorithm> us ...

  8. TCTrack

    TCTrack TCTrack: Temporal Contexts for Aerial Tracking,空中追踪的时间上下文 论文 官方代码 贡献: 提出了一种时间自适应卷积TAdaCNN. 提 ...

  9. vue3学习

    资料: http://docs.vikingship.xyz/ 声明类型:      1.使用ref可以声明基础数据 2.使用reactive声明对象数据 3.computed可以返回一个不变的响应式 ...

  10. [NPUCTF2020]EzRSA

    [NPUCTF2020]EzRSA 题目: from gmpy2 import lcm , powmod , invert , gcd , mpz from Crypto.Util.number im ...