javascript - 使用 fullPage.js 水平滚动，是否可以使用鼠标滚轮？

Question

我正在将fullPage.js用于单页浏览器网站。它工作得很好。它支持通过滑动滚轮滚动整页幻灯片，并且每张幻灯片还可以包含水平幻灯片，通常通过单击其中一个侧箭头触发。

我想强制用户滚动浏览该幻灯片，然后才能进入下一张幻灯片。有谁知道向下滚动时允许用鼠标滚轮触发幻灯片的方法？然后，当它到达该幻灯片的结尾时，它会再次垂直滚动到下一张幻灯片吗？

Answer 1

2016 年更新

现在 fullPage.js 为其提供了Scroll Horizo​​ntally 扩展。

---

你想要完成的并不是在插件中实现那么简单。另外，我想说的是，从用户体验的角度来看，强迫用户遵循一条路径并不是一种好的做法。

此外，一旦用户到达下一个部分然后向上滚动，应该发生什么？他是不是应该一路追回来，把上一节的幻灯片再扔一遍，才能继续往上走？

无论如何，如果您想自己完成它，首先需要避免滚动幻灯片（或要应用此功能的部分幻灯片）时的自动滚动行为。

然后，您需要通过根据滚动方向触发控制箭头事件来更改滚动行为以触发操作以转到下一张或上一张幻灯片。

一旦到达滑块的末端，您甚至需要再次添加自动滚动。

如果你想自己做，这听起来并不简单。您需要重新编码插件。

Answer 2

您可以使用 jquery.mousewheel 来做到这一点，例如：

$('#fullpage').on('mousewheel', function(event) {
       if (event.deltaY > 0){$.fn.fullpage.moveSlideRight();}
       else{$.fn.fullpage.moveSlideLeft();}
});

https://github.com/jquery/jquery-mousewheel