CODEWITHSUNDEEP
javascriptjqueryfullpage.js
snow
snow

Reputation: 475

fullpage.js: disable page scroll when scrolled with the mouse pointer inside a container

What's happening: Scrolling works no matter which position i have the mouse while i scroll.

What i want to achieve: When the user scrolls with the mouse pointer positioned inside a particular container, I would like to disable the plugin from changing pages. When the user scrolls with the mouse pointer outside that same container, the normal functionality of the plugin should be restored; i.e. the pages should be scrollable again.

What have i tried: I listened for the scroll event on the document and found out whether the mouse is inside the container while executing the scroll and store the possibilities as a boolean.

$(document).bind("mousewheel", function(event) {
   // preventScroll = true;
   console.log(event);
   if($(event.target).closest(".no-scroll").length) {             
     preventScroll = true;
    }
    else {
      preventScroll = false;
    }
});

Then onLeave i try to find out the value of preventScroll and try to stop event propagation (since in want to stop an actual event) by returning false

  setTimeout(function() {
      console.log(preventScroll);
      if(preventScroll) {
        console.log("no-scroll")
        return false;
      }
  }, 10);

I an using setTimeout to capture the desired value of preventScroll although I guess the plugin executes a scroll within that 10 ms and that's why return false doesn't seem to have an effect. I can't seem to figure out how else to proceed to achieve the desired functionality.

Codepen: https://codepen.io/binarytrance/pen/YxBqPj

In this implementation, the container i want to disable scroll is in the second page/section. Please be aware of the values spit out in the console.

Upvotes: 1

Views: 1802

Answers (1)

Alvaro
Alvaro

Reputation: 41595

Use the fullpage.js option normalScrollElements. Check the fullpage.js docs for more info:

normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.

Upvotes: 5

Related Questions