0

我希望有一个页面可以正常滚动，直到到达一个部分，我有几张幻灯片，这里的滚动行为应该更改为 fullpage.js 之类的东西，直到幻灯片结束，然后恢复正常的滚动行为。

页面的html结构https://codepen.io/skb089/full/poPbdqe

这三个项目：.a-item和.b-item是.c-item我想要 fullpage.js 之类的功能的幻灯片，.normal-scroll是我希望页面正常滚动的部分

到目前为止，我已经尝试过：

启用了鼠标控制的 Swiper Js，但它在边缘功能上的发布非常有问题，并且无法正常工作。此处突出显示的问题，但提供的解决方案对我不起作用。

交叉点观察者检查对象何时完全在视口中并使用 jquery 鼠标滚轮禁用滚动，然后根据滚动方向和其他条件循环显示每张幻灯片，但每当我滚动太快时，交叉点观察者不会在右侧触发时间，并导致可怕的不一致体验。

var Options = {
  root: null,
  rootMargin: "0px",
  threshold: 0.99,
};    
observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        const ratio = entry.intersectionRatio;
        const section = entry.target;
        if (ratio >0.99) {
          disableScroll()
        }
        else {
             console.log("no")
         }
      });
    }, Options);
    
    var abc= document.querySelector(".abc");
    observer.observe(abc);

我试过这个来规避它，但它没有改变任何东西

然后是 Gsap 的 ScrollTrigger，我可以使用它来固定该部分，但时间线无法按预期工作，我必须不断滚动以使其动画化，如果滚动太快，则会跳过该部分。按方向捕捉标签也不顺畅，而且经常滞后。

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: "#items",
    pin: "#items",
    start: "top top",
    end: "bottom 40%",
    scrub: 1,
    snap: {
      snapTo: "labelsDirectional",
    },
  },
});

tl.addLabel("a")
  .to(".nav-dot.a", { outline: "1px solid white" })
  .addLabel("b")
  .to(".a-item", { autoAlpha: 0 })
  .to(".nav-dot.a", { outline: "1px solid transparent" })
  .from(".b-item", { autoAlpha: 0 })
  .to(".nav-dot.b", { outline: "1px solid white" })
  .addLabel("c")
  .to(".nav-dot.b", { outline: "1px solid transparent" })
  .to(".b-item", { duration: 0.1, autoAlpha: 0 })
  .from(".c-item", { duration: 0.1, autoAlpha: 0 })
  .to(".nav-dot.c", { outline: "1px solid white" })
  .addLabel("end");

对此的一些解决方案将不胜感激。

4

0 回答 0