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

还在为`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 结构：

<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() 提供了更强大的自定义能力，可以根据具体需求进行调整，从而提供更好的用户体验。

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