JS DOM编程笔记 - scrollIntoView()（十九）

这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战

今天我们来使用scrollIntoView() 方法来将元素滚动到视口的指定位置。

假设有一个元素列表，并且希望某个元素滚动到视口顶部，在没有scrollIntoView() 之前我们可能会用锚点链接，或者使用JavaScript去计算，然后去设置元素的scrollTop值来实现滚动。

现在我们可以使用 Element.scrollIntoView() 方法。

语法

element.scrollIntoView() 接受一个布尔值或一个对象：

element.scrollIntoView(alignToTop);

或者

element.scrollIntoView(options);

该方法接受下面的两个参数

`alignToTop`

alignToTop 是一个布尔值。

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

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

alignToTop 默认为 true。

`options`

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

options对象有以下属性：

behavior属性定义了过渡动画。behavior属性接受两个值： auto 或 smooth。默认为 auto。

block 属性定义了垂直对齐方式。它接受四个值中的一个： start, center, end或 nearest。默认为start。

inline 属性定义了水平对齐方式。同业也接受四个值中的一个： start, center, end或 nearest。默认为nearest。

scrollIntoView() 例子

假设我们有一个HTML页面，其中有一个包含所有编程语言的列表：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS scrollIntoView 示例</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>
    let btn = document.querySelector('.btn');
    let el = document.querySelector('.special');

    btn.addEventListener('click', function () {
      el.scrollIntoView(true, {
        behavior: 'smooth'
      });
    });
  </script>
</body>
</html>

页面展示：

如果不滚动，我们看不到<li class="special">JavaScript</li>的列表项，当点击Scroll Into View按钮时，列表会滚动到JavaScript的列表项。

2021-11-04 at 17.54.47 - Tomato Parakeet

点击此处查看在线示例

要将 JavaScript 列表项与视图底部对齐，将 false 值传入 scrollIntoView() 方法：

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

btn.addEventListener('click', function() {
  el.scrollIntoView(false);
});

总结

今天我们学习了如何使用 scrollIntoView()方法将元素滚动到指定的视口。注意不同浏览器的支持情况不同，使用之前需测试。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新