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

fullpage.js change scroll direction on scroll

本文关键字：滚动 方向 fullpage js      更新时间：2023-09-26

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

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

当您访问第二张幻灯片时，滚动方向是否可以更改为水平？

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

这在fullpage.js中可能吗？或者我必须换成另一个脚本吗？

好吧，这是基本方法：

  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位是如何跨浏览器的。你可以用这个插件替换鼠标滚轮处理程序，使其正确地跨平台。

下面是一个带有jquery.mousewheel的JSFiddle，用于完全跨平台的解决方案。

相关文章：