vue3向上加载更多scrollIntoView出现闪动

在 Vue3 中，当你使用 `scrollIntoView` 功能实现页面滚动到指定元素以便加载更多数据时，可能会遇到一些闪动的问题。这通常是由于浏览器对滚动位置的更新、DOM操作以及虚拟滚动（如无限滚动）之间的同步处理不够理想导致的。

当用户滚动接近底部并触发加载更多时，Vue 需要计算应该滚动到哪个位置，然后通过 `scrollIntoView` 来执行滚动。但如果这个过程发生在视图更新和实际滚动之间，就可能导致瞬间的闪动，因为浏览器可能还在处理上一次的滚动动画或者视口调整。

解决这个问题的一些建议：

1. **异步滚动**：尽量在用户滚动停止后再调用 `scrollIntoView`，可以结合 `Intersection Observer API` 或者 `MutationObserver` 进行监听，等待元素进入视野范围再触发加载操作。

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 加载更多数据，并在回调中滚动
      fetchMoreData().then(() => entry.target.scrollIntoView());
      observer.unobserve(entry.target);
    }
  });
});

2. **平滑滚动效果**：如果仍然有闪烁，可以考虑在滚动之前禁用默认的滚动事件，完成加载后再启用。

element.addEventListener('wheel', function(e) { e.preventDefault(); }, { passive: false });

fetchMoreData().then(() => {
  element.style.transform = 'translateY(0)';
  setTimeout(() => {
    element.removeEventListener('wheel', ...);
  }, 0);
});

3. **优化动画**：使用 CSS 的 `transition` 或 `animation` 来平滑滚动，减小视觉上的跳跃感。

.scroll-target {
  transition: transform 0.5s ease;
}