react监听页面滑动并判断滑动方向

东湖高新第一会所掌门人

于 2021-04-20 14:06:54 发布

阅读量3.4k

点赞数

文章标签： reactjs javascript

本文链接：https://blog.youkuaiyun.com/qq_42359718/article/details/115905061

版权

本文介绍了一种实现页面滑动监听的方法，并通过比较前后两次滚动位置来判断用户的滚动方向，进而控制页面元素的显示与隐藏状态。文章提供了具体的JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路
1、开启滑动监听
2、定义获取滑动当前距离函数 getScollTop （）
3、定义两个值一个当前值一个滑动后的值初始值为0（也是上一次滑动距离值）
4、滑动时获取当前滑动值
比较上次值跟当前滑动值
最后设置旧值为此次滑动距离值

  let  scrollTop = 0
  let topValue = 0
const getScollTop = () => {
    let  scrollTop = 0;
      if( document?.documentElement && document?.documentElement?.scrollTop)
      {
          scrollTop = document?.documentElement.scrollTop;
      }
      else if(document?.body)
      {
          scrollTop=document?.body.scrollTop;
      }
      return scrollTop;
}

  const bindHandleScroll = () => {
    scrollTop = getScollTop();
    if (scrollTop  <= topValue) {
    	console.log('向上')
      setIsShow(false)
    }
    else {
    	console.log('向下')
      setIsShow(true)
    }
    setTimeout(function(){topValue=scrollTop ;},0);
  }

  useEffect(() => {
    window.addEventListener('scroll', bindHandleScroll)
    return () => {
      window.removeEventListener('scroll', bindHandleScroll)
    }
  }, [])