react在函数组件中添加滚动监听事件

在函数组件中添加滚动监听事件可以使用React的Hooks来实现。具体步骤如下：

1. 使用useState Hook来定义一个状态变量，用于存储滚动条的位置。

2. 使用useEffect Hook来添加滚动监听事件，当滚动条位置发生变化时，更新状态变量的值。

3. 在函数组件中使用状态变量的值，来实现滚动条位置的动态展示。

示例代码如下：

import React, { useState, useEffect } from 'react';

function ScrollListener() {
  const [scrollPosition, setScrollPosition] = useState();

  useEffect(() => {
    function handleScroll() {
      const position = window.pageYOffset;
      setScrollPosition(position);
    }

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

  return (
    <div>
      <p>当前滚动条位置：{scrollPosition}</p>
      <div style={{ height: '200px' }}>滚动内容</div>
    </div>
  );
}

export default ScrollListener;

在上面的代码中，我们使用useState Hook定义了一个名为scrollPosition的状态变量，并将其初始值设为。然后，使用useEffect Hook来添加滚动监听事件，当滚动条位置发生变化时，更新scrollPosition的值。最后，在组件中使用scrollPosition的值来展示当前滚动条的位置。