react 中监听scroll

最新推荐文章于 2025-07-07 09:02:20 发布

原创最新推荐文章于 2025-07-07 09:02:20 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react 中监听scroll

react 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript监听滚动事件，包括设置滚动监听、获取浏览器和元素的宽度、读取滚动位置以及如何通过scrollBy和scrollTo方法来改变滚动条的位置。这些技巧对于网页开发中实现平滑滚动效果、响应式布局调整等场景非常实用。

1. dom.addEventListener('scroll', this.orderScroll.bind(this));

  orderScroll() {
   / ****** /
  }
  


  1.document.body.clientWidth //浏览器窗口的宽度
  
  2.div.clientWidth  //div的宽度
  
  3.div.offsetLeft //div距离左侧的宽度
  
  4.div.scrollLeft // 滚动条滚动的距离

  
  设置滚动的距离：
  div.scrollBy(200, 0) //横向
  div.scrollBy(0, 200) //纵向
  
  滚动的位置：
  div.scrollTo(300,100)
  
  div.scrollTo(0,0)  //滚动到起始位置