How to prevent background scrolling when Bootstrap 3 modal open on mobile browsers?

Question

How to prevent background scrolling when Bootstrap 3 modal open on mobile platforms? On desktop browsers the background is prevented from scrolling and works as it should.

On mobile browsers (Safari ios, Chrome ios, etc), when a modal is opened and using your finger to scroll it, the background also scrolls as does the modal. How do I prevent that?

Solution 1

See here: https://github.com/twbs/bootstrap/issues/7501

So try:

$('body').css('overflow','hidden');
$('body').css('position','fixed');

V3.0.0. should have fixed this issue. Do you use the latest version? If so post an issue on https://github.com/twbs/bootstrap/

Solution 2

Try this,

 body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

Solution 3

I tried the accepted answer which prevented the body from scrolling but had the issue of scrolling to the top. This should solve both issues.

As a side note, it appears overflow:hidden doesn't work on body for iOS Safari only as iOS Chrome works fine.

var scrollPos = 0;

$('.modal')
    .on('show.bs.modal', function (){
        scrollPos = $('body').scrollTop();
        $('body').css({
            overflow: 'hidden',
            position: 'fixed',
            top : -scrollPos
        });
    })
    .on('hide.bs.modal', function (){
        $('body').css({
            overflow: '',
            position: '',
            top: ''
        }).scrollTop(scrollPos);
    });

Solution 4

$('.modal') 
.on('shown', function(){ 
  console.log('show'); 
  $('body').css({overflow: 'hidden'}); 
}) 
.on('hidden', function(){ 
  $('body').css({overflow: ''}); 
}); 

use this one

Solution 5

No scripts needed.

BS 3 sets a .modal-open class on body that you can use to set the position and overflow values (made with LESS).

body {
    font-family:'Open Sans';
    margin:0;

    &.modal-open {
        position:fixed;
        overflow:hidden;

        .modal { 
            overflow: scroll;

            @media only screen and (min-resolution:150dpi) and (max-width: @screen-sm),
            only screen and (-webkit-min-device-pixel-ratio:1.5) {
                overflow: scroll; 
                -webkit-overflow-scrolling: touch; 
            }
        }
    }   
}

View more solutions

Comments

[fat fantasma]

thanks, that was it. I had some left over code from BS 2 messing me up.

[Fedor]

too verbose, I think.

[Michal Stefanow]

I actually posted the issue here - github.com/twbs/bootstrap/issues/15852 - body.modal-open { position: fixed; } has a side effect of scrolling to the top... (still not sure what is the best way)

[Julian Dormon]

Michael Stefanow did you figure out the scrolling to top issue by any chance? I am having the same issue with this fix.

[Tim Rijavec]

Maybe this would be a better choice hence the page doesn't scrolls back up: $('body').css({"position": "fixed", 'top': (-scrollTo) + 'px'});

[Ryan Charmley]

Fix does not seem to work. Jump to top happens when the position is set back to static given the need for the 0 second animate.

[Tim Rijavec]

So, given a global variable var scrollTo; you can have two functions function beforeModalOpen() { scrollTo = $('body').scrollTop(); $('body').css({"position": "fixed", 'top': (-scrollTo) + 'px'}); } and function afterModalClose() {$('body').css("position", "static"); $('body').animate({scrollTop: scrollTo}, 0);} and call them appropriately.

[Ade]

one thing to maintain the scroll position I did the following when you load the overlay save your scroll position [var scrollTop = document.getElementById("body").scrollTop] when you close the overlay restore your position with [document.getElementById("body").scrollTop = scrollTop;]

[Perry]

V3 Did not fix this issue

[madzohan]

@AntonK hm, I've simply put thing which worked for me :) thanks for downvote lol

[vborutenko]

Has a side effect of scrolling to the top

[Ujjwal Kumar Gupta]

can you please provide a demo

[WitVault]

is it working? Please provide some demo if possible. Thanks.

[m.spyratos]

V4 Did not fix this issue. http://v4-alpha.getbootstrap.com/getting-started/browsers-de‌​vices/#modals-and-dr‌​opdowns-on-mobile

[Mark Pruce]

I posted below a solution that fixed the scroll to top issue - similar to what @Ade says above, but a little more detailed.

[iamse7en]

Thank you. Worked great for me, tested on desktop and ios. My last issue is trying to prevent scrolling to top on iOS after I an ajax action. Doesn't scroll to top on desktop.

[iamse7en]

nevermind, adding $('body').scrollTop(lastKnownScrollTopPosition); to my x.js.erb file as well (the file that executes js code upon submit) worked great. thanks!

[Hubert]

To fix the right margin, add padding with width equal to the width of the scrollbar: stackoverflow.com/a/19015262/4160062

[bkwdesign]

no negative effects on desktop, does improve modal experience on my iPhone.. but, upon closing my modal, the original screen has scrolled-to-top

[bkwdesign]

I'm using your solution, minus your line of code position: fixed

[Praveen]

but when i enter something in text field and then, when i try to scroll up or down the body content scrolls again.

[Mugur 'Bud' Chirica]

Can you create a jsfiddle?

[Admin]

Does not work - chrome Version 63.0.3239.132 Still scrolls background.

[kmgdev]

Adding this fixed my issue where dynamically-sized content inside a modal window was not scrolling.

[Mugur 'Bud' Chirica]

Glad to hear that.

[Mark Salvania]

This helps for mobile users especially for IOS