[js] 第230天 写一个方法判断页面滚动方向

[haizhilin2013]

第230天 写一个方法判断页面滚动方向

我也要出题

[SXX19950910]

  function debounce(fn, wait) {
    let timeout = null;
    return function() {
      if(timeout !== null)
        clearTimeout(timeout);
      timeout = setTimeout(fn, wait);
    }
  }
  const $wrapper = document.getElementById('wrapper')
  let [x,y] = [0, 0]
  const halfHeight = ($wrapper.offsetHeight / 2) + 17
  const halfWidth = ($wrapper.offsetWidth / 2) + 17
  const handle = () => {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
    if (scrollLeft > x) {
      if (scrollLeft === halfWidth) console.log('向右滚动到底')
      else console.log('向右滚动')
    } else if (scrollLeft < x) {
      console.log('向左滚动')
    }
    if (scrollTop > y) {
      if (scrollTop === halfHeight) console.log('向下滚动到底')
      else console.log('向下滚动')
    } else if (scrollTop < y) {
      console.log('向上滚动')
    }
    x = scrollLeft
    y = scrollTop
  }
  window.addEventListener('scroll', debounce(handle, 200))

[forever-z-133]

var lastScrollTop = 0, lastScrollDirection;
var event = new Event('scroll-direction-change');

scroller.addEventListener("scroll", function(e) {
  var scrollTop = e.target.scrollTop;
  var direction = scrollTop - lastScrollTop > 0 ? 1 : -1;
  if (lastScrollDirection !== direction) {
    event.direction = direction;
    scroller.dispatchEvent(event);
    lastScrollDirection = direction;
  }
  lastScrollTop = scrollTop;
});

scroller.addEventListener("scroll-direction-change", function(e) {
  console.log(e.direction > 0 ? '向下滚' : '向上滚', e);
});

[forever-z-133]

if (window.onwheel) {
  scroller.addEventListener("wheel", function(e) {
    console.log(e.deltaY > 0 ? '向下滚' : '向上滚');
  });
} else if (window.onmousewheel) {
  scroller.addEventListener("mousewheel", function(e) {
    console.log(e.wheelDelta < 0 ? '向下滚' : '向上滚');
  });
} else if (window.MouseScrollEvent) {
  scroller.addEventListener("DOMMouseScroll", function(e) { // Firefox
    console.log(e.detail > 0 ? '向下滚' : '向上滚');
  });
}