CODEWITHSUNDEEP
javascriptjqueryhtmlscrollfullpage.js
mattia
mattia

Reputation: 621

fullpage.js change scroll direction on scroll

I am using fullpage.js to create a wp site, I wonder if it is possible change the scroll direction when the user gets to a certain page.

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

Is it possible for the scroll direction to change to horizontal when you visit the second slide?

So instead of clicking on the arrows to navigate horizontally, I want the mouse wheel to scroll horizontally.

Is this possible with fullpage.js or do I have to change to another script?

Upvotes: 4

Views: 3204

Answers (1)

DanielST
DanielST

Reputation: 14163

Okay, here's the basic method:

  1. When you get to a page that needs horizontally scrolled, add a mousewheel listener that:
  2. Turns scroll events into left or right slide changes and
  3. Prevents the default for the mousewheel unless:
    • Last slide and scroll down or
    • First slide and scroll up
  4. Turn off the listener when you enter another slide.

There is also some code to prevent things from happening while slides are loading.

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 on Chrome. I'm not sure how cross browser the e.originalEvent.deltaY bit is. You can replace the mousewheel handler with this plugin to make it properly cross platform.

Here's a JSFiddle with jquery.mousewheel for a fully cross platform solution.

Upvotes: 2

Related Questions