滚动到指定元素不触发页面滚动技巧

还在为`scrollIntoView()`方法导致页面全局滚动而烦恼吗？本文提供了一种更精确的JavaScript解决方案，教你如何避免全局滚动，实现指定元素在特定容器内的平滑滚动。通过使用`scrollTo()`方法，并精确计算目标元素在容器内的位置，我们可以轻松控制滚动行为，优化用户体验。本文详细讲解了如何获取元素、计算位置，以及使用`parent.scrollTo()`方法实现容器内居中滚动，并附带HTML结构和CSS样式示例，助你快速掌握这一实用技巧。告别全局滚动，提升页面滚动体验，尽在本篇文章！

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

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

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

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

以下是一个示例，展示如何使用 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);

代码解释：

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

HTML 结构：

  


  

    
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 样式，以便启用垂直滚动。
• 根据实际需求调整代码中的偏移量计算，以实现不同的滚动效果。
• 如果需要水平滚动，可以使用 scrollTo() 方法的 left 属性。

总结

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

终于介绍完啦！小伙伴们，这篇关于《滚动到指定元素不触发页面滚动技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！