JavaScript scrollIntoView() 方法详解

摘要：在本教程中，您将学习如何使用 scrollIntoView() 方法将元素滚动到视图中。

假设您有一系列元素，并且您希望将特定元素突出显示并滚动到视图中。

为了实现这一点，您可以使用 element.scrollIntoView() 方法。element.scrollIntoView() 接受布尔值或对象

element.scrollIntoView(alignToTop);Code language: JavaScript (javascript)

或

element.scrollIntoView(options);Code language: CSS (css)

该方法接受以下两种参数之一

alignToTop

alignToTop 是一个布尔值。

如果将其设置为 true，则该方法将使元素的顶部与视窗的顶部或可滚动祖先的可见区域的顶部对齐。

如果将 alignToTop 设置为 false，则该方法将使元素的底部与视窗的底部或可滚动祖先的可见区域的底部对齐。

默认情况下，alignToTop 为 true。

options

options 参数是一个对象，它允许您更精确地控制元素在视图中的对齐方式。但是，Web 浏览器的支持可能略有不同。

options 对象具有以下属性

behavior 属性定义过渡动画。behavior 属性接受两个值：auto 或 smooth。它默认为 auto。
block 属性定义垂直对齐方式。它接受四个值之一：start、center、end 或 nearest。默认情况下，它是 start。
inline 属性定义水平对齐方式。它也接受四个值之一：start、center、end 或 nearest。它默认为 nearest。

JavaScript scrollIntoView() 示例

假设您有一个包含以下编程语言列表的 HTML 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS scrollIntoView Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <button class="btn">Scroll Into View</button>
        <ul>
            <li>C</li>
            <li>Java</li>
            <li>Python</li>
            <li>C++</li>
            <li>C#</li>
            <li>Go</li>
            <li>Visual Basic</li>
            <li>JavaScript</li>
            <li>PHP</li>
            <li>SQL</li>
            <li>R</li>
            <li>Swift</li>
            <li class="special">JavaScript</li>
            <li>MATLAB</li>
            <li>Assembly language</li>
            <li>Ruby</li>
            <li>PL/SQL</li>
            <li>Classic Visual Basic</li>
            <li>Perl</li>
            <li>Scratch</li>
            <li>Objective-C</li>
        </ul>
    </div>
    <script src="scrollIntoView.js"></script>
</body>
</html>
Code language: HTML, XML (xml)

在不滚动的情况下，JavaScript 列表项（具有名为 special 的类）不在视窗中。当单击 “滚动到视图” 按钮时，JavaScript 列表项将滚动到视图中

let btn = document.querySelector('.btn');
let el = document.querySelector('.special');

btn.addEventListener('click', function () {
    el.scrollIntoView(true);
});
Code language: JavaScript (javascript)

工作原理

首先，选择具有 btn 类别的按钮和具有 special 类别的列表项。
然后，将事件监听器附加到按钮的单击事件。
最后，通过在单击事件处理程序中调用 el.scrollIntoView(true) 方法将 JavaScript 列表项滚动到视窗中。

这是 JavaScript scrollIntoView() 演示。

要使 JavaScript 列表项与视图的底部对齐，请将 false 值传递给 scrollIntoView() 方法

let btn = document.querySelector('.btn');
let el = document.querySelector('.special');

btn.addEventListener('click', function() {
    el.scrollIntoView(false);
});Code language: JavaScript (javascript)

在本教程中，您学习了如何使用 JavaScript scrollIntoView() 方法将元素滚动到视窗中。

本教程对您有帮助吗？