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

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.

Answer 2

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; }