Prevent the page below the modal from scrolling

[jasonlynx]

No description provided.

[ImGr0k]

@jasonlynx for Prevent the page, i use it:
https://www.geeksforgeeks.org/how-to-disable-scrolling-temporarily-using-javascript/
Create custom .js file and add the following code:

function disableScroll() {
    // Get the current page scroll position
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,

        // if any scroll is attempted, set this to the previous value
        window.onscroll = function() {
            window.scrollTo(scrollLeft, scrollTop);
        };
}

function enableScroll() {
    window.onscroll = function() {};
}

And the next step is to add an option for the gallery:

<a href="Image.jpg"
        class="fresco"
        data-fresco-group="Group_name"
        data-fresco-group-options="
            onShow: function() {
                disableScroll()
            },
            afterHide: function() {
                enableScroll()
            }
        ">
        <img src="Image.jpg">
</a>

Enjoy!

[dnsBlah]

@ImGr0k
I find it still bumpy and sketchy at least on iOS Safari.

Review your functions:

function disableScroll() {
    var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    ];
    var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
    html.data('scroll-position', scrollPosition);
    html.data('previous-overflow', html.css('overflow'));
    html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);
}

function enableScroll() {
    var html = jQuery('html');
    var scrollPosition = html.data('scroll-position');
    html.css('overflow', html.data('previous-overflow'));
    window.scrollTo(scrollPosition[0], scrollPosition[1]);
}

Credit on stack-overflow

[JonasSpot]

I'd suggest setting up a css class .no-scroll {overflow: hidden;} and then onShow add that class to that body and afterHide remove it.

EDIT: This somehow doesn't work on iOs safari. Or at least not completely, it lets you scroll the first time you try and then it stops. As a workaround I added this css rule and it seems to work:

.fr-window { touch-action: none; }