玩转 scrollIntoView 与 scrollIntoViewIfNeeded API

2024-01-21 12:57:15

前言

各位开发者们，大家好。今天，我们将探索两个强大且实用的 JavaScript API：Element.scrollIntoView() 和 Element.scrollIntoViewIfNeeded()。

作为前端开发人员，我们经常需要处理页面滚动的问题。无论是让用户轻松查看页面特定部分，还是在复杂布局中突出显示重要元素，滚动都是至关重要的。这两个 API 为我们提供了优雅且高效的方式来控制滚动行为，让我们的代码更加简洁高效。

scrollIntoView()：让元素滚动到视窗中

scrollIntoView() 方法可以将指定的元素滚动到浏览器窗口的可见区域内。它接受一个可选的参数 behavior，该参数指定滚动的行为。

element.scrollIntoView(behavior)

behavior 参数可以取以下值：

auto：这是默认值。如果元素不在视窗内，它将被滚动到视窗顶部。如果元素已经在视窗内，它将保持不动。
smooth：元素将平滑地滚动到视窗顶部。
instant：元素将立即滚动到视窗顶部，不带任何动画效果。

scrollIntoViewIfNeeded()：让元素滚动到视窗中，但不超出视窗

scrollIntoViewIfNeeded() 方法与 scrollIntoView() 方法非常相似，但它有一个关键的区别：它只在元素不在视窗内时才将元素滚动到视窗中。如果元素已经在视窗内，它将保持不动。

element.scrollIntoViewIfNeeded(behavior)

behavior 参数与 scrollIntoView() 方法中的 behavior 参数相同。

实例

让我们看一些使用 scrollIntoView() 和 scrollIntoViewIfNeeded() 方法的实例。

// 将元素滚动到视窗顶部
document.getElementById("element").scrollIntoView();

// 将元素平滑地滚动到视窗顶部
document.getElementById("element").scrollIntoView({ behavior: "smooth" });

// 将元素立即滚动到视窗顶部
document.getElementById("element").scrollIntoView({ behavior: "instant" });

// 只在元素不在视窗内时才将元素滚动到视窗中
document.getElementById("element").scrollIntoViewIfNeeded();

// 只在元素不在视窗内时才将元素平滑地滚动到视窗中
document.getElementById("element").scrollIntoViewIfNeeded({ behavior: "smooth" });