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

2023年9月1日 210次阅读

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

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

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

因此,我希望鼠标滚轮水平滚动,而不是单击箭头水平导航.

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

最佳答案 好的,这是基本方法：

>当您到达需要水平滚动的页面时,添加一个鼠标滚轮侦听器：
>将滚动事件转换为左或右幻灯片更改和
>防止鼠标滚轮的默认值,除非：

>最后一张幻灯片,向下滚动或
>首先滑动并向上滚动

>输入另一张幻灯片时关闭监听器.

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

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.

点赞