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

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

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"});

参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

猜你喜欢

转载自blog.csdn.net/LingHuzh/article/details/107631509