详解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

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • stm32H747_mpeg4是什么格式和mp4

    stm32H747_mpeg4是什么格式和mp41.H.264与MPEG的关联 在视频编解码技术定义方面有两大标准机构。一个是国际电信联盟(ITU)致力于电信应用,已经开发了用于低比特率视频电话的H.26x标准,其中包括H.261、H.262、H.263与H.264;另一个是国际标准化组织(ISO)主要针对消费类应用,已经针对运动图像压缩定义了MPEG标准。MPEG标准包括MPEG1、MPEG2与MPEG4。 以制订国际通讯标准为主的国际电信联盟ITU-T,在完成H.263(针对视频会议之用的串流视频标准)后,与IS.

    2022年9月19日
    0
  • springboot 注解_pagehelper分页原理

    springboot 注解_pagehelper分页原理案例环境jdk1.8,mysql8.0,idea(工具),springboot,mybatis-plus详情看pom.xml项目结构结构解释项目由网关,公共依赖模块,和商品的优惠券,商品服务,订单服务,仓储服务和会员服务组成(案例测试使用shop-product,common),父工程为聚合工程不作为依赖管理一、common模块(组件可在人人开源项目中获取renrne-fast),common是一个基础maven项目pom.xml(common)<?xm.

    2022年7月28日
    3
  • SynchronousQueue同步队列

    SynchronousQueue同步队列SynchronousQueue简介Java6的并发编程包中的SynchronousQueue是一个没有数据缓冲的BlockingQueue,生产者线程对其的插入操作put必须等待消费者的移除操作take,反过来也一样。不像ArrayBlockingQueue或LinkedListBlockingQueue,SynchronousQueue内部并没有数据缓存空间,你不能调用peek()方…

    2022年6月22日
    21
  • bufferedwriter类_flatfileitemreader

    bufferedwriter类_flatfileitemreader如果单独使用FileWriter也可以。上面这个加了一个缓冲,缓冲写满后在将数据写入硬盘。你每写一个数据,硬盘就有一个写动作,性能极差。BufferedWriter是修饰者。FileWriter是被修饰者。这里有一个”修饰类”的概念。这样做极大的提高了性能。…

    2025年7月16日
    0
  • 进出口流程 & 报关单据

    进出口流程 & 报关单据出口流程一.委托人1.需找货运代理公司2.向代理公司询问价格一般为ALLIN价格(空运费+燃油费+战险费)总费用=ALLIN价格*(货物公斤数)ALLIN价格

    2022年7月3日
    30
  • LaTeX入门级教程

    LaTeX入门级教程    LaTeX(LATEX,音译“拉泰赫”)是一种基于ΤΕΧ的排版系统,由美国计算机学家莱斯利·兰伯特(LeslieLamport)在20世纪80年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由TeX所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类…

    2022年7月16日
    11

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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