bootstrap modal removes scroll bar bootstrap modal removes scroll bar javascript javascript

bootstrap modal removes scroll bar


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.


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


Its better to use overflow-y:scroll and remove padding from body, bootstrap modal added padding to page body.

.modal-open {  overflow:hidden;  overflow-y:scroll;  padding-right:0 !important;}

IE browser Compatible: IE browser doing same thing by default.