0

我已经在一个带有 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/

4

0 回答 0