CODEWITHSUNDEEP
javascriptjqueryfullpage.js
Evan
Evan

Reputation: 77

Override Automatic Scroll in Fullpage.js when user uses mouse scroll or keyboard

I'm looking for a little help!

I am using Alvaro Trigo's Fullpage.js for a Wordpress site I'm developing.

On the Homepage, I have each section scrolling automatically every 5000ms.

However, the client has requested this to be overridden if the user decides to navigate each section using the mouse or keyboard. Is this possible? I'm a little unsure how to tackle it.

Here is the work in progress.

Thank you in advance — Any help will be much appreciated! Please let me know if you need any more information.

Upvotes: 2

Views: 283

Answers (1)

Alvaro
Alvaro

Reputation: 41595

You would have to listen the mousewheel event and clear the interval you set for your automatic sliding.

Example online

Something like:

addMouseWheelHandler();

function MouseWheelHandler(){
    clearInterval(myIntervalId);
}

function addMouseWheelHandler() {
    if (document.addEventListener) {
        document.addEventListener('mousewheel', MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
        document.addEventListener('wheel', MouseWheelHandler, false); //Firefox
    } else {
        document.attachEvent('onmousewheel', MouseWheelHandler); //IE 6/7/8
    }
}

myIntervalId would be a global variable that you have to set when creating your intnerval:

var myIntervalId;

//whatever
myIntervalId = setInterval(fuction(){
    $.fn.fullpage.moveSectionDown();
}, 5000);

Upvotes: 1

Related Questions