React中实现滚动时圆形背景缩放且内部图片尺寸固定的方法

问题描述 #

开发React项目时需要实现：用户向下滚动页面，圆形背景元素随滚动放大，但内部图片尺寸保持固定且位置不变。当前代码中背景放大时图片也会跟着缩放，不符合需求。

核心原因 #

原代码中将<Image>放在了被scale变换的.grow-element容器内，CSS的transform属性会创建新的包含块，导致内部的fixed定位元素实际相对于这个容器定位，同时父容器的缩放会直接作用于子元素，所以图片会跟着放大。

解决方案 #

将图片与圆形背景容器分离，让两者各自独立定位：

1. 圆形背景容器保持固定定位和缩放逻辑
2. 图片单独设置固定定位，脱离背景容器的层级和变换影响
3. 调整定位参数，确保图片始终处于圆形背景的顶部位置

修改后的组件代码 #

import React, { useEffect, useState } from "react";
import PersonImg from "../assets/person.png";
import Image from "next/image";

const CircleScroll = () => {
  const [scaleFactor, setScaleFactor] = useState(1);

  const handleScroll = () => {
    const scrollY = window.scrollY;
    const newScaleFactor = 1 + (scrollY / window.innerHeight) * 30;
    // 限制最大缩放比例，避免超出视口
    if (newScaleFactor <= window.innerWidth / 70) {
      setScaleFactor(newScaleFactor);
    }
  };

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

  return (
    <>
      {/* 圆形背景容器 - 仅负责缩放 */}
      <div
        className="grow-element"
        style={{ transform: `scale(${scaleFactor})` }}
      />
      {/* 独立定位的图片 - 不受背景缩放影响 */}
      <Image
        className="fixed top-0 left-1/2 -translate-x-1/2"
        src={PersonImg}
        alt="person-image"
        width={100}
        height={100}
      />
    </>
  );
};

export default CircleScroll;

修改后的CSS代码 #

.grow-element {
  width: 150px;
  height: 150px;
  background-color: #FFE67B;
  border-radius: 50%;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0); /* 初始仅水平居中，缩放由React状态控制 */
  z-index: -10;
}

关键改动说明 #

• 将图片从背景容器中移出，用React片段包裹两个独立元素
• 背景容器调整初始定位：left:50% + transform: translate(-50%, 0) 实现水平居中，避免与缩放逻辑冲突
• 图片设置left:1/2 + -translate-x-1/2 实现水平居中，固定在顶部，完全不受背景容器的缩放影响
• 移除背景容器的flex布局（不再需要居中图片）

内容的提问来源于stack exchange，提问作者Santhosh