fullpage.js在滚动方向上更改滚动方向
我使用fullpage.js来创建wp站点,我想知道是否可以在用户进入特定页面时更改滚动方向。fullpage.js在滚动方向上更改滚动方向
更好地说明,让我们用这个这个例子: http://alvarotrigo.com/fullPage/examples/navigationV.html
是否有可能当你访问second slide滚动方向改变到水平?
因此,我不想单击箭头来水平导航,而是希望鼠标滚轮水平滚动。
这是可能与fullpage.js或我必须改变到另一个脚本?
好,这是基本的方法:
- 当你到了一个需要水平滚动页面,添加一个
mousewheel
侦听器: - 打开滚动事件为向左或向右滑动变化和
- 阻止默认的鼠标滚轮,除非:
- 最后一张幻灯片,然后向下滚动或
- 第一张幻灯片并向上滚动
- 当您输入另一张幻灯片时关闭侦听器。
还有一些代码可以防止幻灯片加载时发生的事情。
var currentSlide = 0;
var loaded = false;
$('#fullpage').fullpage({
navigation: true,
navigationTooltips: ['First section', 'Second section', 'Third section'],
sectionsColor: ['#f1c40f', '#e67e22', '#c0392b'],
loopHorizontal: false,
afterLoad: function (anchorLink, index){
loaded = true;
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
currentSlide = slideIndex;
loaded = true;
},
onLeave: function(index, nextIndex, direction) {
loaded = false;
if (nextIndex == 2) {
$('#fullpage').on("mousewheel",function(e){
if(loaded){
loaded = false;
var delta = e.originalEvent.deltaY;
console.log(delta);
if(delta>0){ //down
if(currentSlide===2){//if last slide
$('#fullpage').off("mousewheel");
}else{
$.fn.fullpage.moveSlideRight();
e.preventDefault();
e.stopPropagation();
}
}else{ //up
if(currentSlide===0){//if first slide
$('#fullpage').off("mousewheel");
}else{
$.fn.fullpage.moveSlideLeft();
e.preventDefault();
e.stopPropagation();
}
}
}else{ //slide still loading, don't scroll
e.preventDefault();
e.stopPropagation();
}
});
}
}
});
这适用于Chrome。我不知道如何跨浏览器e.originalEvent.deltaY
位。您可以用this plugin替换鼠标滚轮处理程序,使其正确跨平台。
这是一个完全跨平台解决方案的JSFiddle with jquery.mousewheel。
我也很喜欢它^^,清晰,工作,出色的工作伙计。也许你应该做更动态的,比如加入'data-direction = horizontal'来确定哪一段必须水平滚动,并使用'$(“。section”+ currentSection +“.slide”).length'来获得最大值,但这已经很难了;) – EdenSource 2015-03-31 16:00:40
@EdenSource是的,如果我在项目中使用它,我会的。但是这显示了解决方案而没有提供完整的代码。这样,任何使用它的人都必须理解它才能使其在项目中运行。 – slicedtoad 2015-03-31 16:03:48
在safari和firefox中无法正常工作:( – mattia 2015-04-01 11:21:32
我做了一些编辑以改善问题的清晰度。如果我有任何问题,请纠正或恢复编辑。 – slicedtoad 2015-03-31 14:30:40
现在可以通过fullpage.js扩展[Scroll Horizontally](http://alvarotrigo.com/fullPage/extensions/continuousHorizontal.html)进行操作。 – Alvaro 2016-09-01 10:36:55