JavaScript scrollIntoView

JavaScript 的 scrollIntoView () 是 Element 类的一个方法，它允许我们将一个元素滚动到窗口的可视区域内。

在本节中，我们将学习如何使用 scrollIntoView () 方法来滚动元素到可视区域。我们还将通过一个示例来实现，通过该示例我们可以理解该函数的工作原理和用法。

JavaScript scrollIntoView () 方法

scrollIntoView () 方法用于将元素滚动到视口中。

语法

在上面描述的语法中，指定的参数是

• alignToTop: 参数 alignToTop 包含一个布尔值，可以是 true 或 false，默认值为 true。对于特定的代码，如果此参数为 true，则元素的顶部将与可视区域的顶部或视口区域的顶部对齐。但是，如果值设置为 false；则元素的底部将与视口底部或滚动条可视区域的底部对齐。
• options: 这是一个对象类型的参数，浏览器支持可能有所不同。此参数提供了更多关于将元素对齐到视图中的控制。
  它有以下属性
  • 第一个属性是 behavior，它定义了过渡动画。该属性可以取 auto 或 smooth 这两个值之一，默认值为 auto。
  • block 属性是另一个定义元素垂直对齐的属性，它可以取 start, center, end 或 nearest 这四个值之一。这里，默认值为 start。
  • 最后一个属性是 inline 属性，它定义了水平对齐，可以取 start, center, end 或 nearest 这四个值之一。这里，默认值为 nearest。

现在，我们来看一个 scrollIntoView () 方法的示例。

JavaScript scrollIntoView() 示例

让我们通过一个例子来理解 JavaScript scrollIntoView () 方法的工作原理

单击按钮一次后，我们得到了以下输出

在输出中，您可以看到，如果不滚动，我们无法在视口中看到列表项。只有在按下按钮后，我们才能看到这些列表项，在按钮点击时，列表项将被滚动到可视区域。

代码解释

1. 上面的代码是一个 html 文件，包含 html 和 JavaScript 代码。
2. 我们创建了一个项目列表，并在项目之间创建了一个 id =id_test，以便我们可以从窗口将要滚动到的位置获取滚动点。
3. 接下来，我们创建了一个名为“Click it”的按钮，当用户单击时，我们将调用该函数。
4. 由于该函数是 JS 函数，因此根据函数定义，将获取特定的项目列表，并将其存储在指定的变量中。
5. 当我们使用 scrolIntoView 属性时，窗口将滚动到特定的列表项。
6. 最后，该项目将在视口中可见。

因此，JavaScript 的 scrollIntoView () 方法用于通过滚动滚动条来使不可见部分可见。您也可以尝试其他方式使用 JavaScript scrollIntoView () 方法。