在前端开发中，我们常常需要将某个元素滚动到视图区域内。scrollIntoView() 是一个非常方便的方法，可以实现这个目标。但是，在使用 scrollIntoView() 方法时，有些情况下我们希望被滚动到的元素能够垂直居中显示，这就需要一些额外的处理。
scrollIntoView() 方法
首先，让我们来了解一下 scrollIntoView() 方法。该方法是 Element 接口的一部分，用于将当前元素滚动到浏览器窗口或其包含块的可见范围内。
scrollIntoView() 方法有一个可选参数 alignToTop，用于指定被滚动到的元素与视图区域顶部对齐还是底部对齐。如果 alignToTop 的值为 true，则被滚动到的元素会尽量靠近视图区域的顶部；如果 alignToTop 的值为 false，则被滚动到的元素会尽量靠近视图区域的底部。
以下是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------
---------- -
------- -------
-
---- -
------- ------
-------------- -----
----------------- -----
-
--------
-------
------
---- ------------------
---- ----------- ----------------
---- ----------- ----------------
---- ----------- ----------------
---- ----------- ----------------
---- ----------- ----------------
------
--------
----- --- - --------------------------------
---------------------
---------
-------
-------这个示例代码中，我们创建了一个高度为 2000px 的容器和五个高度为 100px 的盒子。然后，在 JavaScript 中选择了第三个盒子，并将其滚动到视图区域内。
中间对齐
现在，我们来看一下如何实现被滚动到的元素垂直居中显示。假设我们有以下 HTML 结构：
<div class="container"> <div class="box" id="box1"></div> <div class="box" id="box2"></div> <div class="box" id="box3"></div> <div class="box" id="box4"></div> <div class="box" id="box5"></div> </div>
如果我们使用 scrollIntoView() 方法将 #box3 元素滚动到视图区域内，它会默认与视图区域的顶部对齐。
要实现垂直居中显示，我们可以先计算出视图区域的高度和被滚动到的元素的高度，然后将它们相减，再除以 2，得到需要滚动的距离。最后，设置 scrollTop 属性即可。
以下是一个示例代码：
const container = document.querySelector('.container');
const box = document.getElementById('box3');
const viewHeight = container.clientHeight;
const boxHeight = box.offsetHeight;
container.scrollTop = box.offsetTop - (viewHeight - boxHeight) / 2;在这个示例代码中，我们首先选择了容器和需要被滚动到的元素。然后，分别获取了容器的高度和元素的高度。接着，计算出需要滚动的距离，并设置容器的 scrollTop 属性。
指导意义
通过本文的学习，我们了解了如何使用 scrollIntoView()
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24894