How to add condition before scrolling operation

Question

I have a problem using the fullpage.js library I need the screen not to scroll when my modal opens.

I tried to disable scrolling using onLeave, afterLoad and jQuery, the code is as follows:

$(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 problem with this code is that after the page scrolls once, the page scrolling stops working. It seems that fullpage.js scrolls first and then jQuery stops scrolling. Any ideas? Thank you everyone

Answer 1

Thanks to @JavierFromMadrid I found the solution But this is not an exact answer to the topic question, but another way to solve the problem One way to solve this problem is to disable fullpagejs scrolling when opening the modal:

$.fn.fullpage.setAllowScrolling(false);

In order to prevent the called function from disabling modal box scrolling, the name of the modal box class needs to be defined in the normalScrollElements option of fullpage.

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