【问题标题】:Scroll horizontal with fullPage.js, is it possible with the mouse wheel?使用 fullPage.js 水平滚动,是否可以使用鼠标滚轮?
【发布时间】:2013-11-26 15:54:45
【问题描述】:
我将fullPage.js 用于单页浏览器网站。它工作得很好。它支持通过滑动滚轮滚动整页幻灯片,并且每张幻灯片还可以包含水平幻灯片,通常通过单击侧箭头之一触发。
我想强制用户滚动浏览该幻灯片,然后才能进入下一张幻灯片。有谁知道向下滚动时允许用鼠标滚轮触发幻灯片的方法?然后,当它到达该幻灯片的结尾时,它会再次垂直滚动到下一张幻灯片吗?
【问题讨论】:
标签:
javascript
jquery
scroll
fullpage.js
【解决方案1】:
您可以使用 jquery.mousewheel 来做到这一点,例如:
$('#fullpage').on('mousewheel', function(event) {
if (event.deltaY > 0){$.fn.fullpage.moveSlideRight();}
else{$.fn.fullpage.moveSlideLeft();}
});
https://github.com/jquery/jquery-mousewheel
【解决方案2】:
2016 年更新
现在 fullPage.js 为其提供了Scroll Horizontally extension。
你想要完成的并不是在插件中实现那么简单。另外,我想说的是,从用户体验的角度来看,强迫用户遵循一条路径并不是一种好的做法。
另外,当用户到达下一个部分然后向上滚动时会发生什么?是不是应该一路追回来,把上一节的幻灯片再扔一遍,才能继续往上走?
无论如何,如果您想自己完成它,首先需要避免滚动幻灯片(或要应用此功能的部分幻灯片)时的自动滚动行为。
然后,您需要通过根据滚动方向触发控制箭头事件来更改滚动行为以触发操作以转到下一张或上一张幻灯片。
一旦到达滑块的末端,您甚至需要再次添加自动滚动。
如果你想自己动手,这听起来确实不简单。您需要重新编码插件。