这是我的解决方案，希望对你有所帮助。

import { motion, useTransform } from "framer-motion";
import { useInView } from "react-intersection-observer";

export default function TechStack({ darkMode }: TechStackProps) {
  const [ref, inView] = useInView({
    threshold: 0.5, // set the threshold to 0.5, which means the container is considered in view when it's 50% visible
    triggerOnce: true, // only trigger the inView callback once
  });
  const translateElement = useTransform(
    scrollXProgress,
    [0, 1],
    ["0%", "-100%"]
  );

  return (
    <section ref={ref}>
      <div
        style={{
          opacity: inView ? 1 : 0, // set the opacity to 1 when the container is in view, otherwise set it to 0
          zIndex: 20,
        }}
        className={`relative ${
          darkMode ? "dark" : `light`
        } flex flex-col items-center justify-center lg:items-start pt-[30%] md:pt-40 pb-20 md:w-full lg:h-screen lg:pb-40 `}
      >
        <div className="max-w-5xl p-4 z-20 lg:pl-[4rem] sticky top-20">
          <h1 className="font-black text-6xl px-4 py-4">
            DESIGN.
            <br />
            DEVELOP.
            <br />
            TEST.
          </h1>
          <p className="font-light text-2xl leading-1 p-4">
            Building a good digital experience requires an even better tool-set
            of technologies. These are some of the technologies I have worked
            with recently.
          </p>
        </div>
        <motion.div style={{ x: translateElement }} className="translate-this-div-on-scroll">
          <div className="tech-stack w-full flex flex-nowrap px-[2rem] md:px-[5rem] gap-8 py-8 z-20 overflow-hidden">
            <TechContainer
              darkMode={darkMode}
              technologyCategory="FRONT-END DEVELOPMENT"
              technologyData={frontEndTechnologies}
            />
            <TechContainer
              darkMode={darkMode}
              technologyCategory="BACK-END DEVELOPMENT"
              technologyData={backEndTechnologies}
            />
            <TechContainer
              darkMode={darkMode}
              technologyCategory="DATABASE MANAGEMENT"
              technologyData={databaseTechnologies}
            />
            <TechContainer
              darkMode={darkMode}
              technologyCategory="SERVERS"
              technologyData={serverTechnologies}
            />
            <TechContainer
              darkMode={darkMode}
              technologyCategory="VERSION CONTROL"
              technologyData={versionControlTechnologies}
            />
            <TechContainer
              darkMode={darkMode}
              technologyCategory="DESIGN"
              technologyData={designTechnologies}
            />
            <TechContainer
              darkMode={darkMode}
              technologyCategory="IDE"
              technologyData={IDE}
            />
            <TechContainer
              darkMode={darkMode}
              technologyCategory="OTHER TECHNOLOGIES"
              technologyData={otherTechnologies}
            />
          </div>
        </motion.div>
      </div>
    </section>
  );
}

字符串