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


相关推荐

  • Silverlight ASP.NET control

    Silverlight ASP.NET control

    2021年7月24日
    58
  • Redis-主从复制和哨兵模式

    主从复制指的是把一台Redis服务器的数据复制到其他Redis服务器上,前者称为主节点Master,后者称为从节点Slave,只能从Master单向复制到Slave,一般Master以写操作为主,Slave以读操作为主,实现读写分离。

    2022年4月8日
    33
  • SecureCRT中文乱码解决方法

    SecureCRT中文乱码解决方法SecureCRT中文乱码解决方法1、先选中当前的Session地址2、然后点击SercureCRT上排主菜单的“Options”,也就是“选项”的意思3、点击Options之后,会出现一个下拉列表,我们选择第一个“SessionOptions…”4、接着会出现一个弹出框,选择目录中的“Appearance”,该功能可以对SercureCRT的外观进行设置5、此时可以看到SercureCRT的编码格式是“Default”,也就是默认的编码格式,我们改为“UTF-8”6、改完编码格式之后,我们回

    2022年7月17日
    13
  • 谷歌浏览器与驱动下载,以及放置位置

    谷歌浏览器与驱动下载,以及放置位置谷歌浏览器稳定版本:78.0.3904.70(建议下载此版本,最新版本可能会找不到对应的驱动)谷歌浏览器驱动下载地址:(驱动不区分32还是64位)http://chromedriver.storage.proxy.ustclug.org/index.html注意:将文件谷歌浏览器驱动chromedriver.exe放到如下安装目录下:1.谷歌浏览器安装目录下:比如C:\Users\Admin…

    2022年6月3日
    165
  • svn客户端的安装与使用教程(svn汉化教程)

    SVN服务端与客户端安装使用(客户端汉化包)客户端下载地址:https://tortoisesvn.net/downloads.zh.html下载64位SVN安装包和64位简体中文安装包安装SVN打开安装包,直接NextNext选择安装目录,如果是自定义目录要新建一个文件夹,否则会把安装文件散落在盘符(此处不安装命令行工具会导致在idea中无法使用subversio…

    2022年4月17日
    57
  • windows平台下载android源码

    最近在看《android内核剖析》,很多细节不具体看代码很难理解,记住了印象也不深,感觉还是跟着源码走一遍好些,回来下载android源码,遇到不少问题,终于开始下载了,整理下流程,鉴于网上很多教程时间久了都会失效,本文截止14年4月18日亲测有效。需要工具如下:下载msysgit,安装     官方下载:http://code.google.com/p/msysgit/downloads

    2022年3月11日
    34

发表回复

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

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