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 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?

回答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">&times;</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>

来源：https://stackoverflow.com/questions/39808537/scrollbar-is-disabled-when-bootstrap-modal-is-opened