How to disable body scrolling when modal is open IOS only

Question

IOS only / iPhone X / iPhone 7 etc.

Even jquery modal libraries don't work! https://jquerymodal.com/ - Open the modal on your iPhone and you will be able to scroll the body.

I am finding it very hard to find a solution that stops the body scrolling without making the page jump to the top each time the modal is opened (which is just as bad experience as the page scrolling)

It seems this is a massive problem lots of people experiencing this. As you can see here:

• How to prevent body scrolling on iOS 12 when modal opened?
• https://stackoverflow.com/questions/49760984/stopping-body-scroll-on-modal-open-bootstrap-4

I have hunted the internet with no luck, has anyone a solution?!

Solution

I've created the following solution, which works on iOS 12!

Although the embedded demo below uses Bootstrap 4, the same solution works equally well with Bootstrap 3 since none of the modal class or event names are different.

Step 1: Use fixed positioning to freeze the body in place when the modal is open

When a Bootstrap modal is opened, a class called .modal-open is added to the body. Add the following additional styles to this class:

body {
    &.modal-open {
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }
}

Now whenever a modal is opened, the body will be fixed in place and sized to the same dimensions as the viewport itself. This completely prevents scrolling because there's nowhere and nothing to scroll to!

But: this also means that opening a modal will cause the page to jump to the top, because the body no longer extends past the bottom edge of the viewport (assuming the page content is taller).

Step 2: Simulate the previous scroll distance while the modal is open

Bootstrap exposes events that fire when a modal is opened or closed. We can use these to solve the "jump to the top" issue by pulling the top of the body up when a modal is opened, so that it looks like the scroll position hasn't changed:

$(function() {
    var $window = $(window),
        $body = $("body"),
        $modal = $(".modal"),
        scrollDistance = 0;

    $modal.on("show.bs.modal", function() {
        // Get the scroll distance at the time the modal was opened
        scrollDistance = $window.scrollTop();

        // Pull the top of the body up by that amount
        $body.css("top", scrollDistance * -1);
    });
});

However, the page will still jump to the top when the modal is closed because the scrollTop value of the window is still 0.

Step 3: Reset everything when the modal is closed

Now we just need to hook into the event that fires when the modal is closed and put everything back how it was:

• Remove the fixed positioning and negative top value on the body
• Set the window's scroll position back to what it was originally

$modal.on("hidden.bs.modal", function() {
    // Remove the negative top value on the body
    $body.css("top", "");

    // Set the window's scroll position back to what it was before the modal was opened
    $window.scrollTop(scrollDistance);  
});

There's no need to manually remove the fixed positioning on the body, because this is set through the .modal-open class, which Bootstrap removes when the modal is closed.

---

Demo

Put it all together, and now you can prevent background scrolling on iOS while a modal is open without losing your scroll position!

Open the following link on an iOS device: https://daguy.github.io/ios-modal-fix/

Comments

[BennKingy]

I don't need IOS specific styles hacks, I need to stop the body scrolling while a modal is open on IOS.

[BennKingy]

I have tried this code on my iPhone with this codepen: codepen.io/bkdigital/pen/YBbpvN - It does not seem to be working, please try it on your iPhone device? You can only see the the top of the page, the body is being cut off wether modal open or not.

[BennKingy]

Do you have a website where you have used this solution? @daGuy

[daGUY]

@BennKingy – it looks like Codepen itself interferes with it somehow. It works perfectly on my iPhone XR running iOS 12 on a standalone page: daguy.github.io/ios-modal-fix

[daGUY]

There are buttons to open the modal at the top and bottom of the page so you can see how it works at different scroll positions.

[BennKingy]

I have tested out your link there and its working perfect! Bloody code pen :P I will implement this today TYVM!

[wuzz]

This works great for not losing body scroll positions but unfortunately it still bugs out and sticks to the body though, disallowing the users to scroll the modal in question, making for a miserable experience to the user. This is really ridiculous that IOS doesn't listen.

[wuzz]

You can make this even better by adding a scroll event to the body when modals are 'open', Simply scrollTop to scrollDistance on every 'body' scroll. This solves 100% of all scroll issues, including the getting "stuck" which happens a lot with 'modal' and 'body' scrolling events happening at the same time.

[daGUY]

@wuzz there shouldn't be any scroll event occurring on the body, because the body should be the exact same size as the viewport. The .modal overlay (which contains the modal window) should scroll if the modal's content is taller than the body/viewport. You can make the scrolling smoother by adding -webkit-overflow-scrolling: touch; to the modal overlay. I updated my demo page with a really tall modal and the scrolling works fine on my iPhone XR.

[George Beier]

If you're stacking modal boxes -- I know it's a no-no -- then you need to keep track of how many are loaded. Only when the last modal is unloaded do you not add back the tag (that is automatically removed when you close any of your modals.).

[daGUY]

FYI, this same solution also works with the new offcanvas element in Bootstrap 5, which still has the same issue, even on iOS 15. The only difference is that the offcanvas element doesn’t automatically add/remove a class on the body when it’s toggled, so you have to use the built-in events to do that yourself.