Fullpage.js changes the scroll direction to scroll

Question

I use fullpage.js to create a wp site, I wonder if it is possible to change the direction of the scroll when the user gets to a specific page.

To better explain, use this example: http://alvarotrigo.com/fullPage/examples/navigationV.html

Is it possible to change the scroll direction to horizontal when visiting the second slide ?

Therefore, instead of clicking on the arrows to move horizontally, I want the mouse wheel to scroll horizontally.

Is this possible with fullpage.js or do I need to switch to another script?

Answer 1

Ok, here is the main method:

• When you go to the horizontal scroll page, add a listener mousewheelthat:
• Rotates scroll events to left or right slide changes and
• Prevents the default for the mouse wheel if:
  • Last slide and scroll down or
  • First slide and scroll up
• Turn off the listener when you enter another slide.

There is also some code to prevent events from happening while loading the slides.

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

This works in Chrome. I'm not sure how cross-browser has a bit e.originalEvent.deltaY. You can replace the mousewheel handler with this plugin to make it a properly cross platform.

---

JSFiddle jquery.mousewheel - .