在 ScrollTrigger 上可视化水平滚动上正确的项目数时出现问题

问题描述 投票：0回答：1

我需要帮助。我正在尝试使用 GSAP 和 NextJS 创建水平滚动，这样当我到达事件开始的部分时，我可以看到一项而不是两项。我不知道我哪里错了。我正在使用 GSAP 和 Tailwind。

我在项目部分想要的是我想在水平滚动中看到所有项目，但截至目前，尽管我有两个项目，但我无法看到多个项目。

TSX + 顺风

import React, { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import comingSoon from "../image/coming_soon.jpg";
import Image from "next/image";
import "../css/portfolio.css";

export default function Portfolio() {
  const sectionRef = useRef(null);
  const triggerRef = useRef(null);

  gsap.registerPlugin(ScrollTrigger);

  useEffect(() => {
    const pin = gsap.fromTo(
      sectionRef.current,
      {
        translateX: 0,
      },
      {
        translateX: "-=100%",
        ease: "inOut",
        duration: 9,
        scrollTrigger: {
          trigger: triggerRef.current,
          start: "top top",
          end: "+=100%",
          scrub: 1,
          pin: true,
        },
      }
    );
    return () => {
      pin.kill();
    };
  }, []);


  return (
    <section className="py-12 h-screen" id="Portfolio" ref={triggerRef}>
      <h1 className="font-heading text-6xl md:text-10xl tracking-tightest about-me text-center">
        Latest Projects
      </h1>
      <div className="horizontal_scroll_container"  ref={sectionRef}>
        <div className="scroll_section py-12 md:py-20" >
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
        <div className="scroll_section py-12 md:py-20">
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

CSS

.horizontal_scroll_container{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow: hidden;
    scroll-behavior: smooth;
}
.scroll_section{
    flex: 0 0 auto;
    display: inline-flex;
}
tailwind-css next.js13 gsap
1个回答
0
投票

考虑从 

overflow-x
规则中删除 
overflow
和 
.horizontal_scroll_container
声明：

.horizontal_scroll_container{
    …
    overflow-x: auto;
    overflow: hidden;
    …
}


const { useRef, useEffect } = React;
const comingSoon = 'https://picsum.photos/1920/1080';
const Image = (...props) => <img {...props}/>

function Portfolio() {
  const sectionRef = useRef(null);
  const triggerRef = useRef(null);

  gsap.registerPlugin(ScrollTrigger);

  useEffect(() => {
    const pin = gsap.fromTo(
      sectionRef.current,
      {
        translateX: 0,
      },
      {
        translateX: "-=100%",
        ease: "inOut",
        duration: 9,
        scrollTrigger: {
          trigger: triggerRef.current,
          start: "top top",
          end: "+=100%",
          scrub: 1,
          pin: true,
        },
      }
    );
    return () => {
      pin.kill();
    };
  }, []);


  return (
    <section className="py-12 h-screen" id="Portfolio" ref={triggerRef}>
      <h1 className="font-heading text-6xl md:text-10xl tracking-tightest about-me text-center">
        Latest Projects
      </h1>
      <div className="horizontal_scroll_container"  ref={sectionRef}>
        <div className="scroll_section py-12 md:py-20" >
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
        <div className="scroll_section py-12 md:py-20">
          <div className="container px-4 mx-auto">
            <div className="flex flex-wrap mx-3">
              <div className="relative w-full lg:w-1/3 mb-8 lg:mb-0 text-center lg:text-left">
                <div className="max-w-md lg:max-w-xs mx-auto lg:ml-0 mb-6 lg:mb-0">
                  <h2 className="text-3xl md:text-4xl mb-4 font-bold font-heading">
                    Lorem ipsum dolor sit amet consectut domor
                  </h2>
                  <p className="text-xs md:text-base text-blueGray-400 leading-loose">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                    luctus eget justo et iaculis.
                  </p>
                </div>
                <div className="lg:absolute lg:bottom-0 lg:left-0 flex justify-center">
                  <a href="http://">gkykytkrykytky</a>
                </div>
              </div>
              <div className="w-full lg:w-2/3 flex flex-wrap px-3">
                <Image priority={true} src={comingSoon} alt="" className="imgProject" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


ReactDOM.createRoot(document.getElementById('app')).render(<Portfolio/>);
.horizontal_scroll_container{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
}
.scroll_section{
    flex: 0 0 auto;
    display: inline-flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js" integrity="sha512-EZI2cBcGPnmR89wTgVnN3602Yyi7muWo8y1B3a8WmIv1J9tYG+udH4LvmYjLiGp37yHB7FfaPBo8ly178m9g4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js" integrity="sha512-OzC82YiH3UmMMs6Ydd9f2i7mS+UFL5f977iIoJ6oy07AJT+ePds9QOEtqXztSH29Nzua59fYS36knmMcv79GOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.0"></script>

<div id="app"></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.