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实现

你可能感兴趣的:(前端,javascript)