JS原生滚动到指定元素

参考

MDN - Web/API/Window
原生js 实现屏幕滚到到指定元素所在位置

一、原生js方法

1、Element.scrollTo()

Element 的scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。

语法：

element.scrollTo(x-coord, y-coord)
element.scrollTo(options)

参数：

• x-coord：是期望滚动到位置水平轴上距元素左上角的像素。
• y-coord：是期望滚动到位置竖直轴上距元素左上角的像素。

或：

options：是一个ScrollToOptions对象。

• top：指定 window 或元素 Y 轴方向滚动的像素数。
• left：指定 window 或元素 X 轴方向滚动的像素数。
• behavior：指定滚动是否应该平滑进行，还是立即跳到指定位置。该属性实际上定义在 ScrollOptions 字典上，它通过 ScrollToOptions 实现。

例子：

element.scrollTo(0, 1000);
// 使用 options:
element.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

2、Element.scrollIntoView()

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

语法：

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

参数：

• alignToTop：如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。
• scrollIntoViewOptions:
  • behavior：可选。定义动画过渡效果， "auto"或 “smooth” 之一。默认为 “auto”。
  • block：可选。定义垂直方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “start”。
  • inline：可选。定义水平方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “nearest”。

示例：

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

该方法还有个变体，Element.scrollIntoViewIfNeeded() ，不过，此方法不属于任何规范，是一种 WebKit 专有的方法，慎用。

3、Element.focus()

// 可用 outline:none; 除去聚焦产生的框
// 对于默认没有聚焦的元素需要主动添加属性：如tabindex="222" 需唯一
element.focus();

二、个人总结

focus：需设置唯一的 tabindex，根据值的不同，可能会打乱默认的tab顺序

scrollTo：是让产生滚动的父元素滚动到指定位置，优势在于可以精准的控制滚动

scrollIntoView：是以目标元素为根，优势在于方便，与 scrollTo 不同，无需确定可滚动的父元素以及滚动位置或距离（例如：动态更新的内容，执行scrollTo前需先获取目标元素的最新滚动位置），这很大程度得简化了滚动的实现。
但它的实际滚动效果受其它元素布局影响。

三、其它相关原生滚动方法

1、Element.scrollBy()

scrollBy() 方法是使得元素滚动一段特定距离的 Element 接口。

scrollTo 的参数表示的是滚动的绝对距离，滚动到某一位置。而此方法的参数是滚动的相对距离，即，滚动多远

语法：

element.scrollBy(x-coord, y-coord);
element.scrollBy(options)

参数：

• x-coord：是元素要在横轴上滚动的距离。
• y-coord：是元素要在纵轴上滚动的距离。

或：

• options：是一个 ScrollToOptions 字典，同 scrollTo

2、Element.scroll()

效果与用法同 Element.scrollTo()

四、示例

scrollTo scrollBy scrollIntoView 对比

菜单与内容联动——vue3实现