使用 window.scrollTo 时避免处理 IntersectionObserver 且行为平滑

Question

我正在使用 nuxt 创建一个登陆页面，我使用哈希来指示页面上的每个路线，为此我使用scrollBehavior来处理路线上的哈希并滚动到平滑的部分：

  router: {
    scrollBehavior: async (to, from, savedPosition) => {
      console.log(to, from, savedPosition);
      if (savedPosition) {
        return savedPosition;
      }

      const findEl = async (hash, x) => {
        return (
          document.querySelector(hash) ||
          new Promise((resolve, reject) => {
            if (x > 50) {
              return resolve();
            }
            setTimeout(() => {
              resolve(findEl(hash, ++x || 1));
            }, 100);
          })
        );
      };

      console.log("to.hash", to.hash);
      if (to.hash) {
        let el = await findEl(to.hash);
        console.log("el", el);
        if ("scrollBehavior" in document.documentElement.style) {
          return window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
          // removing behavior not cause conflicts
          //return window.scrollTo(0, el.offsetTop);
        } else {
          return window.scrollTo(0, el.offsetTop);
        }
      }

      return { x: 0, y: 0 };
    }
  },

我也使用IntersectionObserver，因此当用户滚动时，如果部分在屏幕视图上出现至少 60%，我会替换 nuxt 上的路线。

问题是当用户位于第 1 部分并且他们想要转到第 3 部分时，因为屏幕上出现的第 2 部分的观察者句柄会处理此路线并避免将用户发送到第 3 部分。

当我使用滚动平滑行为更新 nuxt 上的路线时，我不确定如何避免 hanlde IntersectionObserver 事件。

    observeSections() {
      console.log("this.sectionObserver", this.sectionObserver);
      try {
        this.sectionObserver.disconnect();
      } catch (error) {}

      const options = {
        rootMargin: "0px",
        threshold: 0.6,
      };
      this.sectionObserver = new IntersectionObserver(
        this.sectionObserverHandler,
        options
      );

      // Observe each section
      const sections = document.querySelectorAll(".section");
      sections.forEach((section) => {
        this.sectionObserver.observe(section);
      });
    },
    sectionObserverHandler(entries) {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          const sectionId = entry.target.id;
          console.log("intersection in", sectionId);
          // Push sectionId to router here
          this.$router.replace({
            name: this.$route.name,
            hash: `#${sectionId}`,
          });
        }
      }
    },

如果你想重现我的项目，我会用我的工作创建一个简单的 nuxt 应用程序。尝试从第 1 部分转到第 3 或 4 部分，您会看到它停在第 2 部分。 CodeSandBox：https://codesandbox.io/s/optimistic-bash-y8ccz