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

Better if you will create your own css file to customize a certain part of your bootsrap.

Do not Alter the css file of bootstrap because it will change everything in your bootstrap once you use it in other parts of your page.

If your page is somewhat long, it will automatically provide a scroll bar. And when the modal opened, it will hide the scroll bar because that's what bootstrap do as a default.

To avoid hiding it when modal is opened, just override it by putting the css code (below) on your own css file.

.modal-open {
    overflow: scroll;
}

just a vice versa...

.modal-open {
    overflow: hidden;
}

Answer 2

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.

Answer 3

Additionally, if modal popup needs to scroll with content inside and the parent needs to remain still, add the following to your Custom.css (overriding css)

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}