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

在React中实现一个div在滚动时高度增大和缩小的效果，可以通过监听滚动事件并根据滚动的位置动态改变div的高度来实现。下面是一个简单的示例代码，展示了如何实现这一功能：

基础概念

滚动事件：当用户滚动页面或某个元素时触发的事件。
React状态管理：使用React的useState钩子来管理组件的状态。
样式动态绑定：通过JavaScript表达式动态地设置元素的样式。

示例代码

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;