详解Element.scrollIntoView()

详解Element.scrollIntoView()Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。语法element.scrollIntoView();//等同于element.scrollIntoView(true)element.scrollIntoView(alignToTop);//Boolean型参数element.scrollIntoView(scrollIntoViewOptions);//Object型参数参数alignToTop可选一个Boolean值

大家好,又见面了,我是你们的朋友全栈君。

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

1.语法

element.scrollIntoView(); // 等同于element.scrollIntoView(true) 
element.scrollIntoView(alignToTop); // Boolean型参数 
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

2.参数

  • alignToTop 可选

    一个Boolean值:

    • 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
    • 如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}
  • scrollIntoViewOptions 可选

    一个包含下列属性的对象:

    behavior 可选

      定义动画过渡效果, "auto""smooth" 之一。默认为 "auto"

    block 可选

      定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"

    inline 可选

      定义水平方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "nearest"

3.示例

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ 
   block: "end"});
element.scrollIntoView({ 
   behavior: "smooth", block: "end", inline: "nearest"});

4.注意

取决于其它元素的布局情况,此元素可能不会完全滚动到顶端或底端。

5.浏览器兼容性

兼容性
【参考资料】:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150299.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • win10-linux双系统安装教程

    win10-linux双系统安装教程需要的工具UltralSO:制作启动盘DiskGenius:划分磁盘空间EasyUEFI:修改启动引导,Windows自带引导不能修改,因此要用Linux的引导(一般默认就是linux的)1、制作启动U盘用UltralSO做,教程很多2、划分磁盘空间用DiskGenius将匀出一块空间做linux系统空间100MBESP分区8GB交换分区自定义容量:根目录分区自定义容量:\home分区3、安装系统U盘启动,安装操作系统4、修改启动顺序…

  • C# 多线程详细讲解「建议收藏」

    C# 多线程详细讲解「建议收藏」C#多线程一、基本概念1、进程首先打开任务管理器,查看当前运行的进程:从任务管理器里面可以看到当前所有正在运行的进程。那么究竟什么是进程呢?进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源。一个正在运行的应用程序在操作系统中被视为一个进程,进程可以包括一个或多个线程。线程是操作系统分配处理器时间的基本单元,在进程中可以有多个线程同时执行代码。进程之间是相对独立的,一个进程无法访问另一个进程的数据(除非利用分布式计算方式),一个进程运

    2022年10月21日
  • Android n_android 反编译

    Android n_android 反编译androidN编译,可能会遇到问题,有三点相关,jdk配置不对、jack开启/运行失败、jack_vm_args。

  • SSM整合——简单的小项目实战[通俗易懂]

    SSM整合——简单的小项目实战[通俗易懂]文章目录:1.SSM整合思路1.1两个容器的创建1.2SSM整合开发的步骤2.SSM整合开发2.1项目的大体结构2.2使用Navicat创建一个表(student2)2.3IDEA中使用maven创建一个web项目2.4在pom.xml文件中添加相关依赖2.5在web.xml文件中。声明容器对象2.6创建项目中特定的包(entity、dao、service、controller)2.7编写mybatis、spring、springmvc的…

  • 详谈双亲委派机制(面试常问)[通俗易懂]

    前言Java虚拟机对class文件采用的是按需加载的方式,也就是说当需要使用该类时才会将它的class文件加载到内存生成class对象,而且,加载某个类的class文件时,Java虚拟机采用的是双亲委派机制,即把请求交由父类处理,它是一种任务委派模式工作原理(1)如果一个类加载器收到了类加载请求,它并不会自己先加载,而是把这个请求委托给父类的加载器去执行(2)如果父类加载器还存在其父类加载器,则进一步向上委托,依次递归,请求最终将到达顶层的引导类加载器;(3)如果父类加载器可以完成类加载任务,就成

  • python处理亿级大数据(rar暴力破解器安卓版)

    转载请注明出处:https://blog.csdn.net/l1028386804/article/details/85566045今天是2019年元旦,首先祝大家元旦快乐,在这个喜庆的日子里,不知道大家有没有坚持研究自己所在领域的知识。其实,每项知识、技能的积累,需要的是日复一日的坚持,正所谓——持之以恒,贵在坚持,这样才能做到每天进步一点点。好了,步入正题,今天,闲来无事,基于Python…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号