元素不在视口时如何自动滚动定位

本篇文章向大家介绍《元素不在视口时自动滚动定位方法》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

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

代码解释：

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

本篇关于《元素不在视口时如何自动滚动定位》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！