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. Vue32 插槽

    1 简介 是一种组件间通信的方式,让父组件可以向子组件指定位置插入 html 结构.子组件中的提供给父组件使用的一个占位标签,用<slot></slot> 表示,父组件可以在这 ...

  2. .Net Core(.Net6)创建grpc

    1.环境要求 .Net6,Visual Studio 2019 以上 官方文档: https://learn.microsoft.com/zh-cn/aspnet/core/tutorials/grp ...

  3. 限流器算法实现(JUC原子类使用实践)

    系列文章目录和关于我 一丶限流器存在的意义 在高并发系统中,出于系统保护角度考虑,通常会对流量进行限流. 限流*的目的是在遇到流量高峰期或者流量突增(流量尖刺)时,通过对流量速率进行限制,当达到限制速 ...

  4. Nacos入门

    1.介绍 ①概要 官网:home (nacos.io) Nacos:Dynamic Naming and Configuration Service(动态命名和配置服务) 你可以看为:Eureka(注 ...

  5. day12-SpringMVC文件上传

    SpringMVC文件上传 1.基本介绍 SpringMVC 为文件上传提供了直接的支持,这种支持是通过即插即用的 MultipartResolver 实现的.spring 用 Jacarta Com ...

  6. Apache Hudi 流转批 场景实践

    背景 在某些业务场景下,我们需要一个标志来衡量hudi数据写入的进度,比如:Flink 实时向 Hudi 表写入数据,然后使用这个 Hudi 表来支持批量计算并通过一个 flag 来评估它的分区数据是 ...

  7. Vue 注册全局组件的方式

    一.语法:Vue的实例.component("组件名称",组件) 1.方式一:这个组件就是 vue文件 import { createApp,h } from 'vue' //引入 ...

  8. C#操作注册表简单教程(附带操作某数据库客户端注册表以实现重置试用期的效果)

    前言: 使用Windows系统,经常会遇到需要做注册表的操作.例如,一些软件需要修改注册表.自己编写的软件需要新建注册表进行写入注册信息等等.以下内容以某常见的数据库操作客户端为例,做一个注册表操作的 ...

  9. JZOJ 3184. 【GDOI2013模拟7】最大异或和

    最大异或和 可持久化字典树经典题 题目网上自己找 来波模板 \(Code\) #include<cstdio> #include<iostream> using namespa ...

  10. 2014-12-2 Z字形扫描

    问题描述 试题编号: 201412-2 试题名称: Z字形扫描 时间限制: 2.0s 内存限制: 256.0MB 问题描述: 问题描述 在图像编码的算法中,需要将一个给定的方形矩阵进行Z字形扫描(Zi ...