问题描述
我在一个页面中实现了机车滚动(反应),其中包含一个 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/
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)