overflow:hidden for body not work in nicescroll in active

[wireinet]

Hello! I develop a website. want to use nicescroll (its awesome! Realy!) i have modal popup window, and in my code i use for body some function to add class with overflow:hidden to prevent scrolling screen when popup appears. This work until i use nicescroll. If nicescroll function work for body - overflow hidden is ignored! Please let me know how to use overlow:hidden for body and continued to use nicescroll.

[rihards-simanovics]

Unfortunately, when you start using this plugin as your main scroll controller, you are bound to it, so you have to play by its rules.

When the popup gets triggered, you need to destroy the nice scroll on the body (remove it from the element) and when the popup closes, reinstate it by using simple event handlers.

Since it's a jQuery plugin, I will provide examples in jQuery. Please note that I started using nice scroll recently and am looking to solve another issue, but since your one is the one I had to research myself, I hope I could help.

So to solve your issue, you must call for this function .remove. It isn't documented here https://github.com/inuyaksa/jquery.nicescroll#dependencies but it will help you remove the nice scroll.

If you have a look at the source code, you will see all possible functions you can trigger: https://github.com/inuyaksa/jquery.nicescroll/blob/efaf45c22a4fe5fcf573eed0c85c113027acb9e8/jquery.nicescroll.js#L3677

So all you need to do is this:

jQuery( ($) => {
    const options = {
        cursorminheight: x,
        background: y,
        cursorcolor: z,
    };

    $('body').niceScroll(options);

    // Listen for when popup has been triggered (read up on popup documentation to find out real triggers)
    $('.popup-in').on('trigger of your choice', function() {
        // Use getNiceScroll() as you are not initialising nice scroll but actually modifying one,
        // and than remove it using the function .remove()
        $('body').getNiceScroll().remove();
    });

    // Listen for when popup gets closed (read up on popup documentation to find out real triggers)
    $('.popup-out').on('trigger of your choice', function() {
        // Reinitialise Nice scroll like you do when you initially load the page
        $('body').niceScroll(options);
    });
});

[wireinet]

Hello! And Thank you for this incredibly detailed answer!