fullpage.js 在滚动时更改滚动方向

Question

我正在使用fullpage.js创建一个wp站点，我想知道当用户到达某个页面时是否可以改变滚动方向。

为了更好地解释，让我们使用这个例子： http://alvarotrigo.com/fullPage/examples/navigationV.html

访问second slide时滚动方向是否可以变为水平？

因此，我希望鼠标滚轮水平滚动，而不是单击箭头进行水平导航。

是否可以使用 fullpage.js 或者我必须更改为另一个脚本？

Answer 1

好的，基本方法如下：

1. 当您到达需要水平滚动的页面时，添加一个mousewheel 监听器：
2. 将滚动事件转换为左右滑动变化和
3. 禁止默认使用鼠标滚轮，除非：
   • 最后一张幻灯片并向下滚动或
   • 首先滑动并向上滚动
4. 在您输入另一张幻灯片时关闭监听器。

还有一些代码可以防止加载幻灯片时发生某些事情。

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();
                }
            });
        }
    }
});

JSFiddle

这适用于 Chrome。我不确定e.originalEvent.deltaY 位是如何跨浏览器的。您可以将鼠标滚轮处理程序替换为this plugin 以使其正确跨平台。

---

这里有一个JSFiddle with jquery.mousewheel，用于完全跨平台的解决方案。