Scrollbar is disabled when Bootstrap modal is opened - html

Question

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 available (visible but disabled) and when trying to some code as shown below does not solve the problem.
.modal-open {
overflow-y: scroll !important;
}
What I want to try the following approaches:
1) I want the main scrollbar is enabled even if modal is open
2) I want the scrollbar of the modal is visible automatically, but when I use overflow-y:scroll; the height of the modal-body cannot be increased automatically and scrollbar on the modal content seems to be disabled (when I set the height, scrollbar is enabled, but ı want to use auto height). Any idea?

Answer 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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal
</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is the modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div style="height: 1600px;"></div>