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 结构：

Mureka

Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。

下载

  


  

    
lorem ipsum dolir sit amet
    
Vestibulum nulla justo
    
Fusce egestas, est ut fringilla facilisis
    
Maecenas eu erat condimentum 
    
Quisque risus
    
fames ac turpis egestas
    
lorem ipsum dolir sit amet
    
Vestibulum nulla justo
    
Fusce egestas, est ut fringilla facilisis
    
Maecenas eu erat condimentum 
    
Quisque risus
    
fames ac turpis egestas
  

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