如何滚动到具有特定 div 类的第一个可见元素？答案

【问题标题】：How can I scroll to first visible element with a specific div class?如何滚动到具有特定 div 类的第一个可见元素？
【发布时间】：2012-09-25 21:40:36
【问题描述】：

无论如何使用javascript自动滚动到具有特定div类的第一个可见元素？

谢谢！

【问题讨论】：

查看这篇堆栈溢出文章：stackoverflow.com/questions/10744299/… 尽量不要重新打开以前提出的问题。
上面的链接问题是相似的，但不是这里提出的问题的重复。

标签： javascript jquery scroll

【解决方案1】：

你应该可以使用这样的东西：

$('html, body').animate({
    scrollTop: $('.class:visible:first').offset().top
}, 1000);

演示：http://jsfiddle.net/Blender/xUw54/2/

【讨论】：

如果元素不存在，则会触发 JavaScript 错误。
您可以简单地添加类似：" if ($(".class")[0]) { //SCROLL } " 来避免该错误

【解决方案2】：

用普通的 JS 就可以轻松搞定：

const items = container.getElementsByClassName('active');
const visible = [...items].filter((el) => {
  // jQuery-like :visible selector
  return !!( el.offsetWidth || el.offsetHeight || el.getClientRects().length );
});

if (visible.length > 0) {
  container.scrollTo({
    top: items[0].offsetTop,
    behavior: 'smooth'
  });
}

假设：

container 是您的可滚动容器，如果您要滚动整个页面，可以替换为 document 和 window。
您正在寻找具有active 类名的第一个项目。
如果您想要平滑滚动，请删除 behavior: 'smooth' 配置，如果您希望滚动在一次跳转中立即发生。

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo

【讨论】：

这不是第一个可见元素。这只是第一个元素。