我想有一个页面，在那里你可以正常滚动，直到你到达一个部分，在那里我有一些幻灯片，这里的滚动行为应该更改为类似于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滚动触发，我可以用它固定部分，但是时间线没有按预期工作，我必须不断滚动以使其动画化，如果滚动太快，则跳过该部分。按方向捕捉标签也不是平滑的，并且经常会延迟多次。

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");

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