scrollIntoView() 让元素进入可视区域

4,811 阅读1分钟

大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我,解锁前端成长新姿势。

最近更新文章:

以下正文:

介绍

DOM元素的 scrollIntoView()方法是一个IE6浏览器也支持的原生JS API,可以让元素进入视区,通过触发滚动容器的定位实现。

语法

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(boolean); // Boolean型参数,true or false
element.scrollIntoView(options); // Object型参数

当参数为Boolean时:

  • 如果为 true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 options: {block:"start",inline:"nearest"}

  • 如果为 false,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的options: {block:"end",inline:"nearest"}

当参数为options对象时,属性有:

  • behavior:定义动画过渡效果, "auto"或 "smooth(平滑滚动)" 之一。默认为 "auto"。

  • block:定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"。

  • inline:定义水平方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

PS:CSS平滑滚动方式:

.box {
    scroll-behavior: smooth; 
}

参考文档

www.zhangxinxu.com/wordpress/2…


原创不易,如果觉得对你有帮助,也欢迎点赞,分享,加收藏!

听说点赞的人,一个月后都会升职加薪,迎娶白富美,走上人生巅峰~

微信图片_20210427113225.png