滚动劫持或仅固定页面上的幻灯片部分

问题描述

我想要一个页面，您可以在其中正常滚动，直到到达我有几张幻灯片的部分，此处的滚动行为应更改为 fullpage.js 之类的内容，直到幻灯片结束，然后恢复正常的滚动行为。

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

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

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

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

Intersection Observer 检查对象何时完全在视口中并使用 jquery mousewheel 禁用滚动，然后根据滚动方向和其他条件循环显示每张幻灯片，但是每当我滚动太快时，intersection Observer 都不会触发在正确的时间，并导致可怕的不一致的体验。

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

我尝试了 this 来绕过它，但它没有改变任何东西

然后是 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",autoAlpha: 0 })
  .to(".nav-dot.c",{ outline: "1px solid white" })
  .addLabel("end");

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）