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


相关推荐

  • [Unity3D]Unity4全新的动画系统Mecanim

    [Unity3D]Unity4全新的动画系统Mecanim

    2021年12月17日
    86
  • 行测题库图形推理_2021年考公务员

    行测题库图形推理_2021年考公务员事业单位考试中,判断推理是占据一定的地位的,其中图形推理是大家经常见到的。然而,有的考生会觉得这类题目有些难,像“相亲”一样,都是看眼缘。实则不然,图形推理有它自己的规律,大家需要根据图形特征去识别该题对应的规律。比如图形相似我们可以从位置变化或者是组合叠加角度上去考虑。如果相似度很高我们更建议大家考虑位置变化,那今天中公教育老师带大家来看一下何为位置变化。1.从所给的四个选项中,选择最合适的一个…

    2022年9月10日
    1
  • iPhone 抓包工具Charles使用[通俗易懂]

    iPhone 抓包工具Charles使用[通俗易懂]Charles是在Mac下常用的截取网络封包的工具,在做iOS开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析。Charles通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。Charles主要的功能包括:支持SSL代理。可以截取分析SSL的请求。支持流量控制。可以模拟慢速网络

    2022年5月16日
    543
  • .NET软件工程师网络在线培训就业课程「建议收藏」

    .NET软件工程师网络在线培训就业课程「建议收藏」.NET软件工程师网络在线培训就业课程课程讲师:北风.NET专职讲师团队 课程分类:套餐适合人群:高级课时数量:2000课时用到技术:MVC5,EF6,BootStrap,HTML5,JqueryMobile,VS,.NET,ASP.NET 北风团队精心打造的42个经典案例,囊括了企业常见项目开发90%的典型应用 1、典型登录

    2022年7月19日
    17
  • MySql数据库基本select查询语句练习题,初学者易懂。

    MySql数据库基本select查询语句练习题,初学者易懂。MySQL数据库的基本查询语句题目:

    2022年5月8日
    50
  • vagrant系列三:vagrant搭建的php7环境

    vagrant系列三:vagrant搭建的php7环境

    2022年2月8日
    70

发表回复

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

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