滚动时使div高度增大和缩小(React)

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

const ScrollDiv = () => {
  const [height, setHeight] = useState('100px');

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      // 根据滚动位置调整div的高度
      const newHeight = `${100 + scrollTop / 10}px`; // 增大速度可以根据需要调整
      setHeight(newHeight);
    };

    window.addEventListener('scroll', handleScroll);

    // 清理函数，防止内存泄漏
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div style={{ height: height, backgroundColor: 'lightblue', transition: 'height 0.3s' }}>
      滚动我试试看！
    </div>
  );
};

export default ScrollDiv;