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

Answer 1

js">

  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))