JavaScript 浏览器元素滚动 scrollIntoView()

scrollIntoView()

​ DOM 规范中没有涉及的一个问题是如何滚动页面中的某个区域。为填充这方面的缺失,不同浏览器实现了不同的控制滚动的方式。在所有这些专有方法中,HTML5 选择了标准化 scrollIntoView()。

​ scrollIntoView() 方法存在于所有 HTML 元素上,可以滚动浏览器窗口或容器元素以便包含元素进入视口。这个方法的参数如下:

  • alignToTop 是一个布尔值。
    • true:窗口滚动后元素的顶部与视口顶部对齐。
    • false:窗口滚动后元素的底部与视口底部对齐。
  • scrollIntoViewOptions 是一个选项对象。
    • behavior:定义过渡动画,可取的值为"smooth"和"auto",默认为"auto"。
    • block:定义垂直方向的对齐,可取的值为"start"、“center”、“end” 和 “nearest”,默认为 “start”。
    • inline:定义水平方向的对齐,可取的值为"start"、“center”、“end” 和 “nearest”,默认为 “nearest”。
  • 不传参数等同于 alignToTop 为 true。

来看几个例子:

// 确保元素可见
document.forms[0].scrollIntoView(); // 同上
document.forms[0].scrollIntoView(true); 
document.forms[0].scrollIntoView({block: 'start'}); // 尝试将元素平滑地滚入视口
document.forms[0].scrollIntoView({behavior: 'smooth', block: 'start'}); 

​ 这个方法可以用来在页面上发生某个事件时引起用户关注。把焦点设置到一个元素上也会导致浏览器将元素滚动到可见位置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/712568.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习中常见的backbone、neck、head的理解

在深度学习中,常见的backbone、neck和head是指网络结构的不同部分,它们各自承担着不同的功能: Backbone(骨干网络):骨干网络通常是指整个深度神经网络的主要部分,负责提取输入数据的特征。骨干网…

寒假作业Day 02

这是第二天的作业,fighting! Day 02 一、选择题 首先char* s[6]是指针数组,也就是其存储的都是这些字符串的地址,其实际上的类型为char**,而fun函数传入了s数组的首地址。而后续fun函数中打印字符,p[i]即…

ad18学习笔记十六:如何放置精准焊盘到特定位置,捕抓功能的讲解

网上倒是一堆相关的指导 AD软件熟练度提升,如何设置板框捕捉?_哔哩哔哩_bilibili 关于Altium Designer 20 的捕抓功能的讲解_ad捕捉设置-CSDN博客 AD软件捕捉进阶实例,如何精确的放置布局元器件?_哔哩哔哩_bilibili AD绘制PCB…

项目-SERVER模块-Socket模块

Socket模块 一、Socket模块是什么?二、代码实现1.成员变量2.构造、析构函数3.获取套接字文件描述符4.创建套接字5.绑定地址信息6.开始监听连接请求7.向服务器发起连接8.获取新连接9.接收数据10.非阻塞接收数据11.发送数据12.非阻塞发送数据13.关闭套接字14.创建一个…

何时使用子查询?一个使用子查询的SQL示例及其工作原理

何时使用子查询?给出一个使用子查询的SQL示例,并解释其工作原理。 子查询,也称为内部查询或嵌套查询,是嵌入在另一个SQL查询中的查询。外部查询,有时称为外部查询或主查询,是包含子查询的查询。子查询可以…

20240301作业

1.使用fwrite、fread将一张随意的bmp图片&#xff0c;修改成德国的国旗 #include <stdio.h> #include <string.h> #include <unistd.h> #include <stdlib.h> int main(int argc, const char *argv[]) {FILE* fp fopen("./gaoda.bmp","…

24.3.1 《CLR via C#》 笔记9

第十二章 泛型 泛型&#xff1a;支持泛型值类型、泛型引用类型、泛型接口、泛型委托&#xff1b;允许在引用类型、值类型和接口中定义泛型方法&#xff1b;泛型参数变量要么称为T&#xff0c;要么以T开头 具有泛型类型参数的类型称为开放类型&#xff0c;不允许构造实例&#…

Java毕业设计 基于SpringBoot vue 社区团购系统

Java毕业设计 基于SpringBoot vue 社区团购系统 SpringBoot vue 社区团购系统 功能介绍 前端用户: 首页 图片轮播 商品信息 商品分类展示 搜索 商品详情 点我收藏 添加到购物车 立即购买 我要开团 去参团 评论 公告资讯 资讯详情 登录 注册 个人中心 更新信息 点我充值 我的订…

Mysql笔记3

1、快速创建表 原理&#xff1a; 将一个查询结果当做一张表新建 这个可以完成表的快速复制 create table emp2 as select * from emp; mysql> select * from emp2; ---------------------------------------------------------------------- …

【vscode提取函数快捷键】提取函数,减少大方法的复杂度

在 Visual Studio Code 中&#xff0c;提取函数的快捷键取决于你所使用的编程语言和安装的插件。以下是一些常用的快捷键组合&#xff0c;可以用来在 Visual Studio Code 中提取函数&#xff1a; 执行以下步骤来提取函数&#xff1a; 选中要提取的代码块。右键单击选中的代码…

System Verilog学习笔记(十二)——数组(2)

System Verilog学习笔记&#xff08;十二&#xff09;——数组&#xff08;2&#xff09; 动态数组 在编译时不会为其定制尺寸&#xff0c;而是在仿真运行时来确定动态数组一开始为空&#xff0c;需要使用new[ ]来为其分配空间声明方式 int dyn[],d2[]; //声明了两个动态数组…

git之远程操作

一.分布式版本控制系统 分布式版本控制系统通常也有⼀台充当“中央服务器”的电脑&#xff0c;但这个服务器的作⽤仅仅是⽤来⽅便“交换”⼤家的修改&#xff0c;没有它⼤家也⼀样⼲活&#xff0c;只是交换修改不⽅便⽽已。有了这个“中央服务器”的电脑&#xff0c;这样就不怕…

ChatGPT学习第四周

&#x1f4d6; 学习目标 ChatGPT实践操作 通过实际操作和练习&#xff0c;加深对ChatGPT功能的理解。 项目&#xff1a;创建一个ChatGPT应用案例 设计一个基于ChatGPT的小项目&#xff0c;将理论应用于实践。 ✍️ 学习活动 学习资料 《万字干货&#xff01;ChatGPT 从零完…

[C++核心编程](一):内存分区

目录 代码区 全局区 栈区 堆区 new操作符 不同区域存放的数据&#xff0c;赋予不同的生命周期&#xff0c;给予开发人员更大的灵活编程。 代码区 存放二进制代码&#xff0c;由操作系统管理未执行程序&#xff08;.exe&#xff09;前已经存在共享&#xff0c;对频繁执行…

达梦数据库查询语句内存溢出问题解决

背景&#xff1a;达梦数据库使用过程中&#xff0c;某天突然服务宕机&#xff0c;导致各类后端服务无法注册到nacos上&#xff0c;重启之后nacos正常启动&#xff0c;可执行一条两千多条数据量的连表查询时间很长&#xff0c;甚至会报错&#xff0c;经查看日志发现在查询过程中…

【C语言】常见的动态内存管理错误

前言 上一篇介绍了C语言中 动态内存管理函数&#xff0c;本片讲解的是 在我们使用动态内存管理时 常见的错误&#xff0c;一起来看看吧~ 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 1.对NULL指针的解引⽤操作 错…

什么是前端框架中的数据绑定(data binding)?有哪些类型的数据绑定?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

YOLOv5白皮书-第Y4周:common.py文件解读

YOLOv5白皮书-第Y4周:common.py文件解读 YOLOv5白皮书-第Y4周:common.py文件解读0.导入需要的包和基本配置1.基本组件1.1 autopad1.2 Conv1.3 Focus1.4 Bottleneck1.5 BottleneckCSP1.6 C31.7 SPP1.8 Concat1.9 Contract、Expand 2.重要类2.1 非极大值抑制&#xff08;NMS&…

vue3中的基本语法

目录 基础素材 vue3的优化 使用CompositionAPI理由 1. reactive() 函数 2. ref() 函数 2.1. ref的使用 2.2. 在 reactive 对象中访问 ref 创建的响应式数据 3. isRef() 函数 4. toRefs() 函数 5. computed() 5.1. 通过 set()、get()方法创建一个可读可写的计算属性 …

函数——递归6(c++)

角谷猜想 题目描述 日本一位中学生发现一个奇妙的 定理&#xff0c;请角谷教授证明&#xff0c;而教授 无能为力&#xff0c;于是产生了角谷猜想。 猜想的内容&#xff1a;任给一个自然数&#xff0c; 若为偶数则除以2&#xff0c;若为奇数则乘 3加1&#xff0c;得到一个新的…