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


相关推荐

  • pandas fillna详解

    pandas fillna详解pandas中补全nan具体的参数Series.fillna(self,value=None,method=None,axis=None,inplace=False,limit=None,downcast=None,**kwargs)[source]参数: value:scalar,dict,Series,orDataFrameValuetouset…

    2022年8月12日
  • 小众网java下载_jar应用下载

    小众网java下载_jar应用下载全版本都有包含:windows、Linux、源码等,根据名称进行挑选、下载!网址:https://jbossas.jboss.org/downloads/如何解决了您的问题,欢迎关注我!还希望来JAVAWEB开发交流群:958923746,有问题欢迎共享,共同提升!…

    2022年10月3日
  • c语言uint16什么意思_int16的取值范围

    c语言uint16什么意思_int16的取值范围uint16intc#C#Int16和C#UInt16(C#Int16andC#UInt16)InC#,Int16knownasasignedintegerof2byteswhichcanstorebothtypesofvaluesincludingnegativeandpositivebetweentherangesof-32…

    2022年8月15日
  • Java实现2048小游戏(直接拿走运行)

    Java实现2048小游戏(直接拿走运行)运行效果:1.项目结构2.代码BaseData接口packagecom.hsy.game;importjava.awt.*;publicinterfaceBaseData{FonttopicFont=newFont(“微软雅黑”,Font.BOLD,50);FontscoreFont=newFont(“微软雅黑”,Font.BOLD,28);FontnormalFont=newFont(“宋体”,Font.PLAI

    2022年7月15日
  • pycharm需要设置环境变量吗_pycharm怎么打开python环境

    pycharm需要设置环境变量吗_pycharm怎么打开python环境01首先我们打开Pycharm软件,创建一个python项目,默认你会看到项目文件夹下面并没有执行环境,如下图所示02接下来我们点击顶部的File菜单,然后点击下拉选项中的Se…

    2022年8月29日
  • 现代汉语常用3500字

    现代汉语常用3500字最近给娃儿取名想着遍历个好名字居然没有完整的3500汉字表就弄了一个现代汉语常用3500字=常见字2500字+次常见字1000字常用字2500字次常用汉字1000字现代汉语常用3500字

    2022年7月1日

发表回复

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

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