Javascript 滚动时在视口上正确对齐div

我正在做一个视差网站，当用户滚动时，滑块将从左侧滑动并在视口内对齐。问题是，我已经滚动鼠标滚轮多次，以便幻灯片对齐。是否有一种方法可以使幻灯片在视口中仅通过一个滚动对齐

这是我正在进行的工作。我正在使用skrollr进行视差设计

HTML

这是我已经实现的javascript，但问题是当我滚动时，它似乎中途停止了

JAVASCRIPT

---

我不知道你们的意思是想让它们转换得更快，还是想让它们在屏幕上停留更长时间

选项1：变换速度更快：

目前，您已将skrollr的数据属性设置为在1000像素上从100->0%滚动幻灯片。目前您有：

<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">

<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
</section>
<section data-2500="transform:translateX(100%); " data-3500="transform:translateX(0%)">
</section>

如果您想让它转换得更快，只需更改这些数字以适应您希望它转换的速度。例如：

<section data-1500="transform:translateX(100%); " data-1600="transform:translateX(0%)">

选项2：在屏幕上停留的时间更长：

如果你想让它们在屏幕上停留更长时间，你只需要增加一张幻灯片转换完成和下一张幻灯片开始之间的距离。目前您有：

<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">

<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
</section>
<section data-2500="transform:translateX(100%); " data-3500="transform:translateX(0%)">
</section>

如果您想让他们在屏幕上停留更长时间，请尝试以下方法：

<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
</section>
<section data-3500="transform:translateX(100%); " data-4500="transform:translateX(0%)">
</section>

希望这有帮助

<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
</section>
<section data-3500="transform:translateX(100%); " data-4500="transform:translateX(0%)">
</section>