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

在React中实现滚动时使div高度增大和缩小的效果，可以通过监听滚动事件来动态改变div的高度。以下是一个实现的示例代码：

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

const ScrollableDiv = () => {
  const [divHeight, setDivHeight] = useState(100);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      setDivHeight(100 + scrollTop); // 根据滚动距离动态改变div的高度
    };

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

  return (
    <div style={{ height: `${divHeight}px`, background: 'lightblue' }}>
      Scrollable Div
    </div>
  );
};

export default ScrollableDiv;

在上述代码中，我们使用了React的函数式组件和Hooks来实现滚动时改变div高度的效果。通过useState来定义div的初始高度为100，并使用setDivHeight来更新div的高度。在useEffect中，我们添加了一个滚动事件监听器，当滚动事件触发时，获取滚动距离scrollTop，并根据滚动距离动态改变div的高度。最后，返回一个具有动态高度的div。

这种滚动时改变div高度的效果可以应用于各种场景，例如在页面滚动时实现顶部导航栏的收缩和展开、滚动时改变图片的大小等。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cmysql
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse