JavaScript：在特定容器内滚动到指定元素，避免全局页面滚动

本文旨在解决使用 scrollIntoView() 方法时，页面全局滚动的问题，并提供一种更精确的方案，即使用 scrollTo() 方法在特定容器内滚动到目标元素。通过计算目标元素在容器内的位置，实现平滑滚动，避免不必要的全局页面滚动，从而优化用户体验。

在使用 JavaScript 进行页面滚动时，scrollIntoView() 方法是一个常用的选择。然而，在某些场景下，我们可能希望只在特定的容器内进行滚动，而不是整个页面。例如，在一个包含滚动条的 div 容器中，我们只想让该容器滚动到目标元素，而避免影响页面其他部分的可视区域。直接使用 scrollIntoView() 方法可能会导致整个页面滚动，这并不是我们期望的结果。

使用 scrollTo() 方法实现精确滚动

要实现精确的容器内滚动，可以使用 element.scrollTo() 方法。该方法允许我们指定容器滚动的 top 和 left 值，从而实现精确控制。

以下是一个示例，展示如何使用 scrollTo() 方法将特定容器滚动到目标元素的中心位置：

立即学习“Java免费学习笔记（深入）”；

var text = document.querySelector('.text');
setInterval(function() {
const parent       = text.parentElement;
const parentHeight = parent.clientHeight;
const textTop      = text.offsetTop - parent.offsetTop;
const textMiddle   = textTop + text.offsetHeight / 2;
parent.scrollTo({ top: textMiddle - parentHeight / 2, behavior: "smooth" });
}, 3000);

代码解释：

1. 获取元素： 首先，我们获取目标元素（.text）及其父容器（.lines）。
2. 计算位置：
   • parentHeight：获取父容器的高度。
   • textTop：计算目标元素顶部相对于父容器顶部的偏移量。这里需要减去 parent.offsetTop，因为 offsetTop 是相对于文档的偏移，我们需要的是相对于父容器的偏移。
   • textMiddle：计算目标元素的中心位置相对于父容器顶部的偏移量。
3. 滚动容器： 使用 parent.scrollTo() 方法，将父容器滚动到目标元素中心位置。top 属性设置为 textMiddle – parentHeight / 2，这样可以将目标元素居中显示在容器内。behavior: “smooth” 属性可以实现平滑滚动效果。

HTML 结构：

<div class="a"></div>
<div class="elem">
<div class="video"></div>
<div class="lines">
<div>lorem ipsum dolir sit amet</div>
<div>Vestibulum nulla justo</div>
<div>Fusce egestas, est ut fringilla facilisis</div>
<div>Maecenas eu erat condimentum </div>
<div>Quisque risus</div>
<div>fames ac turpis egestas</div>
<div>lorem ipsum dolir sit amet</div>
<div>Vestibulum nulla justo</div>
<div class="text">Fusce egestas, est ut fringilla facilisis</div>
<div>Maecenas eu erat condimentum </div>
<div>Quisque risus</div>
<div>fames ac turpis egestas</div>
</div>
</div>
<div class="a"></div>

CSS 样式：

.a {
height: 200px;
}
.elem {
position: relative;
}
.video {
width: 200px;
height: 400px;
background: #ccc;
margin-bottom: 100px;
}
.lines {
overflow-y: auto;
height:120px;
}
.text {
background: yellow;
}

注意事项：

• 确保父容器具有 overflow-y: auto 或 overflow-y: scroll 样式，以便启用垂直滚动。
• 根据实际需求调整代码中的偏移量计算，以实现不同的滚动效果。
• 如果需要水平滚动，可以使用 scrollTo() 方法的 left 属性。

总结

通过使用 element.scrollTo() 方法，我们可以精确控制特定容器的滚动行为，避免不必要的全局页面滚动。这种方法在需要精细控制滚动效果的场景下非常有用，例如在视频播放器的字幕滚动、聊天记录的滚动等。 相比于 scrollIntoView()，scrollTo() 提供了更强大的自定义能力，可以根据具体需求进行调整，从而提供更好的用户体验。