scroll 主动滚动到指定元素

导言

最近在做 H5 网页时，需要实现选择某一分类后，顶部导航栏也需要动态改变。
但是顶部导航栏是横向滚动的容器，会出现动态选中后，元素没有出现在视窗内。

方案

• 需要给滚动容器内的每个子元素添加 id，方便之后获取对应 dom

<div class="scroll">
	<div id="item1">item1</div>
	<div id="item2">item2</div>
	<div id="item3">item3</div>
	<div id="item4">item4</div>
	<div id="item5">item5</div>
	<div id="item6">item6</div>
	<div id="item7">item7</div>
</div>

• 在需要主动控制的地方添加滚动逻辑
• 获取需要控制元素的 dom
• 执行 scrollIntoView 函数

change() {
	...
	// 假如需要 item7 自动滚动到视窗内
	let dom = document.getElementById('item7');
	if(dom) {
		dom.scrollIntoView();
	}
}

注意点

• scrollIntoView()可以滚动浏览器窗口或某个容器元素，使其出现在视窗内。
• 传入 true 或者不传参数，窗口滚动后会使调用元素顶部和视窗顶部尽可能平齐，所以可能会自动往上滚动靠到屏幕顶部。
• 传入 false 参数，会尽可能全部出现在视窗内，调用元素底部与视窗顶部尽可能平齐
• 传入参数有三种形式，如下所示

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

// 示例
element.scrollIntoView({
	behavior: 'smooth',
    block: 'center',
    inline: 'nearest',
})

参数

• 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”

• inline: 'nearest'，可以使横向滚动时，不自动靠顶部，元素只平移
• behavior: 'smooth'，可以使滚动带有动画效果

其他资料

• 参考传送门
• 参考传送门
• 参考传送门