如何使用组合 API 在 Vue 3 中隐藏滚动时的导航栏？答案

【问题标题】：How to hide the navbar on scroll in Vue 3 using the composition API?如何使用组合 API 在 Vue 3 中隐藏滚动时的导航栏？
【发布时间】：2022-08-19 03:32:42
【问题描述】：

我正在尝试使用组合 API 创建一个函数，该函数可以在向上滚动时隐藏导航栏并在向下滚动时显示它。我已经在 vanilla JS 中有这个功能，但是在 Vue3 中我很难将它带入 DOM。

在香草 JS 中：

let prevScrollpos = window.pageYOffset;
window.onscroll = function () {
  console.log(\'scrolling\')
  let currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    // @ts-ignore
    document.getElementById(\"navbar\").style.top = \"0\";
  } else {
    // @ts-ignore
    document.getElementById(\"navbar\").style.top = \"-65px\";
  }
  prevScrollpos = currentScrollPos;
}

我的问题是，在 Vue3 中，我似乎无法多次注册一些简单的滚动功能，例如 pageYOffset。我对 @scroll=\"function\" 指令或事件侦听器没有任何成功。目前，我正在尝试使用指令在基础层查看 DOM，但我也不知道如何以这种方式持续跟踪滚动位置。我很高兴使用指令进行修复，但我也很高兴有一个仅存在于 Navbar.vue、Homepage.vue 或 App.vue 中的解决方案。

那么如何使用 Composition API 让 Vue3 看到窗口的滚动位置？

标签： javascript scroll vuejs3 vue-directives

【解决方案1】：

好的，所以我实际上在我的导师和this post 的帮助下找到了答案。我没有意识到，因为我的视差滚动效果（上面没有显示）所有滚动都发生在主标签中，这意味着窗口从未看到任何滚动。另外，我没有意识到将这个 onscroll 效果放在 onMounted 钩子中可以很好地与 Composition API 中的 DOM 交互，这可能是因为第一个问题。我修复了它，现在我完成的代码看起来像这样。

    onMounted(() => {
      let main = document.querySelector("main");
      let prevScrollpos = main.scrollTop;
      let nav = document.querySelector(".navbar");
      main.onscroll = function () {
        let currentScrollPos = main.scrollTop;
        if (prevScrollpos > currentScrollPos) {
          // @ts-ignore
          nav.classList.add("navbar_hidden");
        } else {
          // @ts-ignore
          nav.classList.remove("navbar_hidden");
        }
        prevScrollpos = currentScrollPos;
      };
    });

因为它现在在主标签中，所以我无法使用 PageYOffset，所以我将其更改为 scrollTop。这是CSS。所有这些都在 Navbar.vue 组件中

.navbar {
  background: $dark;
  transform: translate3d(0, 0, 0);
  transition: all 0.2s ease-out;
}

.navbar_hidden {
  transform: translate3d(0, -100%, 0);
}

至此，我不那么惊心动魄的传奇故事画上了句号。

【讨论】：