JavaScript：仅在元素不在视口中时才滚动到该元素

scrollIntoView() 方法虽然可以方便地将元素滚动到视口中，但有时会导致整个页面滚动，即使目标元素已经在特定的容器内。为了更精确地控制滚动行为，我们可以使用 element.scrollTo() 方法，并结合一些计算，实现仅在父元素内部滚动到目标元素。

使用 element.scrollTo() 实现精确滚动

element.scrollTo() 方法允许我们指定滚动的具体位置。为了实现仅在父元素内部滚动到目标元素，我们需要计算目标元素相对于父元素的偏移量，并将其设置为父元素的滚动位置。

以下是一个示例，演示如何实现此功能：

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);

代码解释：

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

1. 获取元素和父元素： 首先，我们获取需要滚动到的目标元素 (.text) 及其父元素 (.lines)。
2. 计算偏移量： 我们计算目标元素相对于父元素的顶部偏移量 (textTop)。text.offsetTop 获取目标元素相对于其 offsetParent 的距离，而 parent.offsetTop 获取父元素相对于其 offsetParent 的距离。两者的差值就是目标元素相对于父元素的顶部偏移量。
3. 计算目标元素中心点位置： 通过 textMiddle 计算目标元素的中心点位置，以便将其居中显示。
4. 滚动到指定位置： 最后，我们使用 parent.scrollTo() 方法将父元素滚动到指定位置。top 属性设置为目标元素中心点位置减去父元素高度的一半，这样可以使目标元素在父元素中垂直居中。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 样式，以便可以滚动。
• 根据实际需求调整代码中的偏移量计算，以实现不同的滚动效果。
• offsetTop 属性的计算依赖于元素的 offsetParent。请确保元素的 offsetParent 设置正确。

总结：

通过使用 element.scrollTo() 方法，我们可以更精确地控制元素的滚动行为，避免不必要的页面滚动。这种方法特别适用于需要在特定容器内平滑滚动到指定元素的场景。通过适当的偏移量计算，我们可以实现各种滚动效果，例如将目标元素居中显示。