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

Question

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

谢谢！

Answer 1

你应该能够使用这样的东西：

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

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

Answer 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