详解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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • android activity跳转动画_叠化转场是什么意思

    android activity跳转动画_叠化转场是什么意思Android Reveal圆形Activity转场动画

    2022年4月20日
    59
  • java核心技术总结

    java核心技术总结*****************java基础*****************一、java中的局部变量、实例变量和类变量二、java中的基本类型和引用类型三、java中的位操作符四、关于java的方法1、方法的重载和重写(方法签名:方法名和参数列表)2、方法的可变参(int…args)(1)基本特点底层就是用数组来实现的;在方法内部可变参可以直接当成数组进…

    2022年7月7日
    19
  • py文件的运行

    安装过程及配置安装过程及配置安装过程及配置安装过程准备:下载好Python的安装程序后,开始安装,在进入安装界面后一定确保勾选将Python加入到系统环境变量的路径里。如图所示:2如果没有

    2022年3月29日
    78
  • 怎样用python开发安卓app_python开发app可以商用嘛

    怎样用python开发安卓app_python开发app可以商用嘛显然,时下最流行的信息学技术就是深度学习了。深度学习(DeepLearning,DL)或阶层学习(hierarchicallearning)是机器学习的技术和研究领域之一,通过建立具有阶层结构的人工神经网络(ArtifitialNeuralNetworks,ANNs),在计算系统中实现人工智能。由于阶层ANN能够对输入信息进行逐层提取和筛选,因此深度学习具有表征学习(representat…

    2022年8月12日
    5
  • 计算立方体,圆柱,圆锥体积的小程序是啥_计算圆柱体体积的程序

    计算立方体,圆柱,圆锥体积的小程序是啥_计算圆柱体体积的程序#include<iostream>#include<cmath>usingnamespacestd;voidvolume_square();//立方体体积函数声明voidvolume_cylinder();//圆柱体积函数声明voidvolume_cone();//圆锥体积函数声明intmain(){intchoice=-1;…

    2025年11月19日
    7
  • 数据结构之循环链表建议收藏

    一循环链表基础在单链表中,有了头结点,我们可以在O(1)时间访问到第一个节点,但如果要访问最后一个节点却需要O(n)的时间,因为我们需要对整个链表进行一次遍历。在循环链表中,我们可以借助尾节点来实

    2021年12月19日
    41

发表回复

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

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