Web 页面滚动

监听页面滑轮滚动

 /**
 * 第一种方式
 */
      function scroll() {
          //console.log("打印log日志");实时看下效果
          console.log("开始滚动！");
      }

      var scrollFunc = function (e) {
          e = e || window.event;
          if (e.wheelDelta) { //第一步：先判断浏览器IE，谷歌滑轮事件    
              if (e.wheelDelta > 0) { //当滑轮向上滚动时 
                  console.log("滑轮向上滚动"); 
                 
              }
              if (e.wheelDelta < 0) { //当滑轮向下滚动时 
                  console.log("滑轮向下滚动");
  
              }
          } else if (e.detail) { //Firefox滑轮事件 
              if (e.detail > 0) { //当滑轮向上滚动时 
                  console.log("滑轮向上滚动");

              }
              if (e.detail < 0) { //当滑轮向下滚动时 
                  console.log("滑轮向下滚动");
              }
          }
      }
      //给页面绑定滑轮滚动事件 
      if (document.addEventListener) {//firefox 
          document.addEventListener('DOMMouseScroll', scrollFunc, false);
      }
      //滚动滑轮触发scrollFunc方法 //ie 谷歌 
      window.onmousewheel = document.onmousewheel = scrollFunc;


 /**
 * 第二种方式
 */
// 内容区随着页面滚动而浮动
  window.onscroll = function () {
      HoverTreeMove()
  };
  function HoverTreeMove() {
    //滚动的距离
      var h_scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
      var hh = window.innerHeight > 0 ? window.innerHeight : document.documentElement.clientHeight;
      var h_scrollHeight = document.body.scrollHeight;
     // 防止苹果设备抖动
      if (h_scrollTop + hh < h_scrollHeight) {
          // ...
      }else {
        // 到了底部
      }

      console.log(hh + "-----hh")
      console.log(h_scrollTop + "-------h_scrollTop")
      console.log(h_scrollHeight + "--------scrollHeight")
      console.log((h_scrollTop + wH) + "-------h_scrollTop + wH ")
  }
  HoverTreeMove()

移动端：

// 移动端手势需要自己来判断
    var body = document.getElementsByTagName("body")[0];
    body.addEventListener('touchstart', touchs, false);
    body.addEventListener('touchmove', touchs, false);
    body.addEventListener('touchend', touchs, false);

    function touchs(event) {
        console.log(JSON.stringify(event.target))
        //阻止浏览器默认滚动事件
        // 会造成 a 标签的点击事件无效
        // event.preventDefault();
        //获取DOM标签
        var box = document.getElementById('box');
        //经过if语句判断event.type执行了哪一个触摸事件
        if (event.type == "touchstart") {
            console.log('开始');
            //获取开始的位置数组的第一个触摸位置
            var touch = event.touches[0];
            //获取第一个坐标的X轴
            startx = Math.floor(touch.pageX);
            //获取第一个坐标的X轴
            starty = Math.floor(touch.pageY);
            //触摸中的坐标获取
        } else if (event.type == "touchmove") {
            console.log('滑动中');
            var touch = event.touches[0];
            movex = Math.floor(touch.pageX);
            movey = Math.floor(touch.pageY);
            //当手指离开屏幕或系统取消触摸事件的时候
        } else if (event.type == "touchend" || event.type == "touchcancel") {
            //获取最后的坐标位置
            endx = Math.floor(event.changedTouches[0].pageX);
            endy = Math.floor(event.changedTouches[0].pageY);
            console.log('结束');
            //获取开始位置和离开位置的距离
            nx = endx - startx;
            ny = endy - starty;
            //经过坐标计算角度公式 Math.atan2(y,x)*180/Math.PI
            angle = Math.atan2(ny, nx) * 180 / Math.PI;
            if (Math.abs(nx) <= 10 || Math.abs(ny) <= 1) {
                console.log('滑动距离过小');
                return false;
            }
            //经过滑动的角度判断触摸的方向
            if (angle < 45 && angle >= -45) {
                console.log('右滑动');
                // alert("left 2 right");
                return false;
            } else if (angle < 135 && angle >= 45) {
                console.log('下滑动');
                // alert("top 2 bottom");
                upScroll();
                return false;
            } else if ((angle <= 180 && angle >= 135) || (angle >= -180 && angle < -135)) {
                console.log('左滑动');
                // alert("right 2 left");
                return false;
            } else if (angle <= -45 && angle >= -135) {
                console.log('上滑动');
                // alert("bottom 2 top");
                downScroll();
                return false;
            }
        }
    }

    function downScroll() {

    }

    function upScroll() {

    }