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


相关推荐

  • css filter属性不生效问题处理

    css filter属性不生效问题处理明天是清明节假期 感谢疫情以来第一个假期就让我学到了一个棘手问题解决方案由于清明节公祭日 公司的网站都要改为灰度样式 明明就是一个很简单的问题 再是在样式表里增加这个一个样式即可 答案很简单 html filter grayscale 100 webkit filter grayscale 100 moz filter grayscale 100 ms fi

    2025年11月10日
    3
  • ctrl+c复制,ctrl+v粘贴_C C T V 8

    ctrl+c复制,ctrl+v粘贴_C C T V 8从Windows世界走入Mac世界,最让不习惯的是在Mac中“复制/粘贴”的快捷键是Command+C/V,而且Command键与C/V键靠得太近,只能用大拇指与食指进行操作,也让人不习惯。再加上远程

    2022年8月5日
    10
  • mysql新建连接1045_Navicat for Mysql 1045错误

    mysql新建连接1045_Navicat for Mysql 1045错误在使用图形用户工具NavicatforMySQL新建连接时,会报一个1045,某用户访问拒绝的错误。一般的解决办法是需要重新修改Mysql的密码,操作步骤如下:1netstopmysql停止mysql服务2进入mysql安装路径的bin目录下,使用mysqld命令,在cmd下mysqld–skip-grant-tables3开一个新的cmd窗口mysql不需要用户名就可…

    2022年5月8日
    78
  • MySQL 字符串数字转换

    MySQL 字符串数字转换1方法一:SELECTCAST(‘123’ASSIGNED);2方法二:SELECTCONVERT(‘123’,SIGNED);3方法三:SELECT’123’+0; 1//数字转字符串2CONCAT()

    2022年5月30日
    39
  • vue父组件操作子组件的方法_子组件没法传值给父组件

    vue父组件操作子组件的方法_子组件没法传值给父组件父组件和子组件我们经常分不清什么是父组件,什么是子组件。现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件。具

    2022年7月30日
    4
  • 什么是守护线程?「建议收藏」

    什么是守护线程?「建议收藏」Java线程分为用户线程和守护线程。守护线程是程序运行的时候在后台提供一种通用服务的线程。所有用户线程停止,进程会停掉所有守护线程,退出程序。Java中把线程设置为守护线程的方法:在start线程之前调用线程的setDaemon(true)方法。注意:setDaemon(true)必须在start()之前设置,否则会抛出IllegalThreadStateExc…

    2022年10月15日
    3

发表回复

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

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