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. 分布式事务 | 使用DTM 的Saga 模式

    DTM 简介 前面章节提及的MassTransit.dotnetcore/CAP都提供了分布式事务的处理能力,但也仅局限于Saga和本地消息表模式的实现.那有没有一个独立的分布式事务解决方案,涵盖多种 ...

  2. LeetCode_806. 写字符串需要的行数

    题目 难度:简单 原文:https://leetcode-cn.com/problems/number-of-lines-to-write-string/ 题目 我们要把给定的字符串 S 从左到右写到 ...

  3. Vue.config.js配置 最新可用版本

    最近 在学前端,然后,学了这个vue-cli脚手架,虽然,我这个vue-cli还不算入门,后我会把这个笔记补上 下面是我的Vue.config.js的配置,我感觉这个复用的程度高,所以记下 了这个随笔 ...

  4. tomcat报错:java.io.IOException: No space left on device

    1 简介 今天网站很多页面访问突然就404了,路径分明没有变,是正确的,就很奇怪 排查日志发现报错java.io.IOException: No space left on device 这个错误,是 ...

  5. 懂九转大肠的微软New Bing 内测申请教程

    最近微软的New Bing开放内测了,网上已经有拿到内测资格的大佬们对比了ChatGPT和New Bing.对比结果是New Bing比ChatGPT更强大.来看看具体对比例子吧 1.时效性更强 Ch ...

  6. ECharts 提示框组件Tooltip属性大全(包含文本注释)

    tooltip: { // 提示框组件:可以设置在全局(tooltip),可以设置在坐标系中(grid.tooltip.polar.tooltip.single.tooltip),可以设置在系列中(s ...

  7. EPICS Archiver Appliance存储waveform记录的尝试

    https://blog.csdn.net/u013894429/article/details/79724454 按上面的指导很容易跑起来,试了一下,也能archive短些的waveform记录,很 ...

  8. ASP.NET Core - 依赖注入(四)

    4. ASP.NET Core默认服务 之前讲了中间件,实际上一个中间件要正常进行工作,通常需要许多的服务配合进行,而中间件中的服务自然也是通过 Ioc 容器进行注册和注入的.前面也讲到,按照约定中间 ...

  9. Golang如何快速构建一个CLI小工示例

    这篇文章主要为大家介绍了Golang如何快速构建一个CLI小工具详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪 如何Golang快速构建一个CLI小工具 在现实开发的 ...

  10. ImGui引入深度测试的方法

    You can use AddCallback() on a given ImDrawList:: to register functions to be run during rendering a ...