禁用水平滚动也会禁用我的响应式导航栏

Question

我在 Whosebug 上发现 post 说你应该使用以下方法来禁用水平滚动：

html, body {
    overflow-x: hidden;
}

这个解决方案对我有用。但是，现在我的导航栏不再响应。在这个问题之前它是这样工作的：如果你向下滚动页面，导航栏将被隐藏。再次开始向上滚动后，导航栏再次可见。有人知道如何在保持 a/my 响应式导航栏功能的同时禁用水平滚动吗？

响应式导航栏代码：

let prevScrollPos = window.pageYOffset;

  window.onscroll = () => {
    let currentScrollPos = window.pageYOffset;
    if (prevScrollPos > currentScrollPos) {
      document.getElementById("nav").style.top = "0";
    } else {
      document.getElementById("nav").style.top = "-100px";
    }

    prevScrollPos = currentScrollPos;
  };

谢谢！

Answer 1

已修复！ :)

显然，我只需要将导航栏元素中的代码从 position: sticky 更改为 position fixed。

禁用水平滚动也会禁用我的响应式导航栏

Disabling horizontal scroll also disables my responsive navigation bar

html

javascript

css

reactjs

tailwind-css