0

关于机车卷轴的部分，我有两个问题。

第一个涉及在第二个过去后不再应该显示在屏幕上的静态部分。

问题 #1 在此处输入图像描述

可以看到第一部分的底部

第二个问题是当你在上面时出现的一个部分，它应该在你到达那里之前是可见的

问题 #2

前 在此处输入图像描述

当我在上面

在此处输入图像描述

我想它来自我的机车标签管理，但我很快就卡住了，因为没有数据滚动部分，我的部分不显示......我附上了一个代码笔供你测试。但是在 codepen 问题 1 上没有出现，因为第 1 节由于某种原因没有与第 2 节重叠......

包含水平部分、机车和进度条增量的 javascript 代码

gsap.registerPlugin(ScrollTrigger);

  // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll

  const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".smooth-scroll"),
    smooth: true,
    smartphone: {
      smooth: true,
    },
    tablet: {
      smooth: true,
    },
  });
  // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
  locoScroll.on("scroll", ScrollTrigger.update);

  // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things
  ScrollTrigger.scrollerProxy(".smooth-scroll", {
    scrollTop(value) {
      return arguments.length
        ? locoScroll.scrollTo(value, 0, 0)
        : locoScroll.scroll.instance.scroll.y;
    }, // we don't have to define a scrollLeft because we're only scrolling vertically.
    getBoundingClientRect() {
      return {
        top: 0,
        left: 0,
        width: window.innerWidth,
        height: window.innerHeight,
      };
    },
    // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
    pinType: document.querySelector(".smooth-scroll").style.transform ? "transform" : "fixed"
  });

  // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
  ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
  // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
  ScrollTrigger.refresh();

  gsap.to("#progressbar", {
    height: "100%",
    ease: "none",
    scrollTrigger: {
      scrub: 0.3
    },
  });


    let pinBoxes = document.querySelectorAll(".pin-wrap > *");
    let pinWrap = document.querySelector(".pin-wrap");
    let pinWrapWidth = pinWrap.offsetWidth;
    let horizontalScrollLength = pinWrapWidth - window.innerWidth;

    // Pinning and horizontal scrolling

    gsap.to(".pin-wrap", {
      scrollTrigger: {
        scroller: ".smooth-scroll", //locomotive-scroll
        scrub: true,
        trigger: "#sectionPin",
        pin: true,
        // anticipatePin: 1,
        start: "top top",
        end: pinWrapWidth,
      },
      x: -horizontalScrollLength,
      ease: "none",
    });

    ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); //locomotive-scroll

    ScrollTrigger.refresh();

https://codepen.io/adrian-jamet/pen/zYEbJmL

我基于水平部分的笔代码： https ://codepen.io/cameronknight/pen/qBNvrRQ

4

0 回答 0