小编Luk*_*uke的帖子

情况

我在页面顶部有一个固定的导航栏。当您向下滚动页面的不同部分时，导航栏会动态更新（下划线和突出显示）。您还可以单击导航栏上的某个部分，它将向下滚动到该部分。

这是使用交集观察器 API 来检测它所在的部分并使用scrollIntoView 滚动到每个部分来完成的。

问题

假设您位于第 1 部分，单击最后一个部分 5，页面就会向下滚动到中间的所有其他部分。滚动速度很快，并且当滚动时，交叉点观察器会检测到所有部分，因此导航会更新。当每个导航项经过每个相应部分时，您最终会得到导航快速变化的效果。

目标

如果该部分仅在帧中持续一毫秒，如何延迟交叉口观察器触发菜单更改？快速滚动时，导航栏仅应在滚动停止在某个部分后更新。

代码设置

const sectionItemOptions = {
  threshold: 0.7,
};

const sectionItemObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {

    if (entry.isIntersecting) {
      // select navigation link corresponding to section

    } else {
      // deselect navigation link corresponding to section

    }
  });
}, sectionItemOptions);

// start observing all sections on page
sections.forEach((section) => {
  sectionItemObserver.observe(section);
});

想法

我的第一个想法是设置一个 setTimeout，以便导航在超时完成之前不会更改，然后如果该部分在超时完成之前离开屏幕，则取消超时。但由于超时是在 forEach 循环中，所以这不起作用。

const sectionItemObserver = new IntersectionObserver((entries, observer) => …

在React的SwiperJs中使用鼠标滚轮或键盘控制滑动不起作用。我似乎找不到任何内容，并且遵循 Swiper API 文档也没有帮助。

使用反应：17.0.1 刷卡器：6.4.11

这里有一个沙盒设置

const App = () => {
  const slides = [1, 2, 3, 4];

  return (
    <Swiper
      slidesPerView={2}
      keyboard={{ enabled: true }}
      direction="vertical"
      mousewheel
    >
      {slides.map((slide) => (
        <SwiperSlide key={slide}>
          <h1>Slide</h1>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};