如何滚动到具有特定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