Scrollbar Is Disabled When Bootstrap Modal Is Opened

I make the Scrollbar of page always visible by using the following code: html { overflow-y: scroll; } However, when opening Bootstrap modal, the main scrollbar is not availab

Solution 1:

Try to change this line:

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

to:

body.modal-open {
  overflow: scroll; !important;
}

The snippet:

body.modal-open {
  overflow: scroll; !important;
}

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://code.jquery.com/jquery-2.1.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target=".bs-example-modal-sm">Small modal
</button><divclass="modal fade bs-example-modal-sm"tabindex="-1"role="dialog"aria-labelledby="mySmallModalLabel"><divclass="modal-dialog modal-sm"role="document"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">&times;</span></button><h4class="modal-title"id="myModalLabel">Modal title</h4></div><divclass="modal-body">
                This is the modal
            </div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button></div></div></div></div><divstyle="height: 1600px;"></div>