如何让元素停在原来的位置机车滚动

如何解决如何让元素停在原来的位置机车滚动

我在一个页面中实现了机车滚动（反应），其中包含一个 CSS 网格元素。 代码沙盒链接：https://vdo8m.csb.app/

页面在机车滚动之前已正确定位。这是元素；

<div class="Boxes">
  <div class="Box-one"></div>
  <div class="Box-two"></div>
  <div class="Box-three"></div>
  <div class="Box-four"></div>
</div>

CSS;

.Boxes {
  display: grid;
  grid-gap: 3vw 2vw;
  grid-template-columns: repeat(4,auto);
  grid-template-rows: repeat(3,max-content);
}
.Box-one {
  grid-column: 1 / 5;
}
.Box-two {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}
.Box-three {
  grid-column: 3 / 5;
}
.Box-four {
  grid-column: 3 / 5;
}

这是没有问题的 html。但是当我添加 Locomotive-scroll 时，我的元素会相互重叠。这是我的机车滚动配置；

const scroll = new LocomotiveScroll({
      el: scrollRef.current,smooth: true,smartphone: {
        smooth: true
      },lerp: 0.031,repeat: true,offset: [0,"40%"]
    });

我需要的是让内盒停在其实际位置而不是相互重叠。我弄乱了不同的偏移值，但元素在一定距离处“暂停”而不是停在其原始位置。该问题仅存在于移动视口中。 代码沙盒链接：https://vdo8m.csb.app/