JavaScript 获取页面滚动方向

2015/03/22 | 1分钟阅读 | 更新于 2015/03/22

看到一个博客里的导航栏在随向下滚动隐藏，向上滚动时显示，于是模仿了一下。印象中单靠css和html不能实现这个效果，于是动用js，但是各大浏览器对js的支持效果不一样，这一点着实是坑

参考

代码

IE11

if (document.addEventListener) {
  //WC3 browsers   IE11 is ok
  document.addEventListener("mousewheel", function (e) {
    //alert(e.wheelDelta); //ie11 is ok 120/-120 120 up -120 down
    if (e.wheelDelta > 0) {
      document.getElementById("nav").className = "navbar3";
    }
    if (e.wheelDelta < 0) {
      document.getElementById("nav").className = "navbar2";
    }
  });
}

Firefox

if (document.addEventListener) {
  document.addEventListener(
    "DOMMouseScroll",
    function (e) {
      //-3 up 3 down
      //alert(e.detail);
      if (e.detail < 0) {
        document.getElementById("nav").className = "navbar3";
      }
      if (e.detail > 0) {
        document.getElementById("nav").className = "navbar2";
      }
    },
    false,
  );
}