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

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

最近更新文章：

• 图片瀑布流，就是如此简单（so easy）
• 梳理ajax跨域常用4种解决方案（简单易懂）
• JS的静态类型检测，有内味儿了

以下正文：

介绍

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…

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

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