javascriptjqueryfullpage.js

how to add condition before scrolling


I have a problem with fullpage.js library I need the screen to not scroll when my modal is open.

I tried onLeave , afterLoad and disable scrolling with jQuery like this :

$(document).ready(function () {
  $(window).bind("wheel", function (e) {
    if (document.getElementsByClassName("modalIsOpen").length != 0) {
      $.fn.fullpage.setAllowScrolling(false);
    } else {
      $.fn.fullpage.setAllowScrolling(true);
    }
  });
  $("#fullpage").fullpage({
    normalScrollElements: ".tableContainer",
  });
});

but the issue with this code is page scrolls once and after the first scroll, finally the page scroll stops working It seems that fullpage.js scrolls first , after that jQuery deactivates scroll. any Idea ? thanks guys


Solution

  • thanks to @JavierFromMadrid I found the solution but it is not an exact answer to the topic question, but it is a different solution to solve the problem One way to solve this problem is to disable fullpagejs scrolling when the modal is opened :

      $.fn.fullpage.setAllowScrolling(false);
    

    In order for the called function not to disable the modal scroll, it is necessary to define the name of the medal class in the fullpage normalScrollElements option.

     $("#fullpage").fullpage({
        normalScrollElements: ".modal",
      });