如何使用组合API在Vue 3中隐藏滚动条？

Question

我试图使用复合API创建一个函数，它可以在滚动时隐藏导航条，并在向下滚动时显示。我已经在vanilla中有了这个函数，但是在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=“函数”指令或事件侦听器方面没有任何成功。目前，我正在尝试使用一个指令来查看底层的DOM，但我也不知道如何以这种方式持续跟踪滚动位置。我很乐意使用指令进行修复，但我也希望有一个只存在于Navbar.vue、Homepage.vue或App.vue中的解决方案。

那么，如何使用复合API使Vue3查看窗口的滚动位置？

Answer 1

好的，我在我的老师和this post的帮助下找到了一个答案。我没有意识到，因为我的视差滚动效果(上面没有显示)所有的滚动发生在主标签，这意味着窗口从来没有看到任何滚动。另外，我没有意识到将on涡旋效果放入onMounted钩子中可以很好地与复合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);
}

这样，我的不那么惊险的传奇就要结束了。