让当前的元素滚动到浏览器窗口的可视区域内

最新推荐文章于 2023-09-08 17:53:35 发布

原创最新推荐文章于 2023-09-08 17:53:35 发布 · 2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文详细介绍了如何使用scrollIntoView()方法将指定元素滚动到浏览器窗口的可视区域内，包括参数设置、对齐方式及动画过渡效果。适用于前端开发者了解并掌握页面元素定位技巧。

前言：在我们的开发过程中有时候我们需要在页面初始化的时候就把某个元素定格在我们的可视区内，或者是点击导航下的分级导航定格到页面的某个元素的。

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

if (subBack == 3 && this.windowWidth < 800){
	document.getElementById('type-3').scrollIntoView(true);
}

scrollIntoView 的参数可以为布尔值也可以为对象

true	false
如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐	如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐

对象：
behavior 可选
定义动画过渡效果， "auto"或 “smooth” 之一。默认为 “auto”。
block 可选
定义垂直方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “start”。
inline 可选
定义水平方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “nearest”。

示例：

document.getElementById('type-3').scrollIntoView(true);
document.getElementById('type-3').scrollIntoView({block: "center",behavior :"auto",inline:"start"});