Question

我正在使用fullpage.js来创建一个wp网站，我想知道当用户访问某个页面时是否可以更改滚动方向。

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

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

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

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

Answer 1

好的，这是基本方法：

当您到达需要水平滚动的页面时，添加一个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();
                }
            });
        }
    }
});

JSFiddle

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

这是完全跨平台解决方案的JSFiddle with jquery.mousewheel。

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

1 个答案: