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

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

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

  


  

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

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