bootstrap modal removes scroll bar

Question

When I trigger a modal view in my page it triggers the scroll bar to disappear. It's an annoying effect because the background page starts moving when the modal moves in / disappears. Is there a cure for that effect?

Answer 1

Thank God I came accross this post! I was pulling my hair out trying to figure how to get my scrollbars back when closing the window using my own close link. I tried the suggestions for CSS but it just wasnt working properly. After reading

class modal-open gets added to the HTML body when you show the modal, and removed when you hide it. -- @flup

I came up with a solution using jquery, so incase anyone else has the same issue and the above suggestions dont work --

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>

Answer 2

the bootstrap modal adds a padding once it opens so you can try this code in your own css

.modal-open {
    padding: 0 !important;
}

Answer 3

I used

.modal-open {
  overflow-y: scroll;
}

In this case you avoids to display the horizontal scroll bar

Answer 4

I think that inherit is better than scroll because when you open modal, it will always open with scroll, but when you don't have any scrolls you will get the same problem. So I just do this:

.modal-open {
  overflow: inherit;
}

Answer 5

I was just playing with this 'feature' of Bootstrap modals. Seems the .modal class has overflow-y:auto; So the modal wrapper gets his own scrollbar when the modal itself becomes to high.

If you always want a scrollbar (designers often do) First set the body

body {
    overflow-y:scroll;
}

Then handle .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

Leave scrollbar disabling on body untouched in this case

All other answers on this page kept making my content jump.

Heads up!

Allthough this solution worked for me all the time, yesterday I had a problem using this fix when the modal is draggable and to large to fit the screen (vertically). It might have something to do with position:sticky elements I added?

Answer 6

This is a feature, class modal-open gets added to the HTML body when you show the modal, and removed when you hide it.

This makes the scrollbar disappear since the bootstrap css says

.modal-open {
    overflow: hidden;
}

You can override this by specifying

.modal-open {
    overflow: scroll;
}

in your own css.