Bootstrap 模式打开时滚动条被禁用

Question

我使用以下代码使页面的滚动条始终可见：

html {
    overflow-y: scroll; 
}

但是，当打开 Bootstrap 模式时，主滚动条不可用（可见但已禁用），并且在尝试如下所示的某些代码时无法解决问题。

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

我想尝试以下方法：

1) 即使模式打开，我也希望启用主滚动条

2) 我希望模态的滚动条是自动可见的，但是当我使用overflow-y:scroll;模态体的高度无法自动增加，并且模态内容上的滚动条似乎被禁用（当我设置高度时，滚动条被启用，但我想使用自动高度）。有什么想法吗？

Answer 1

尝试改变这一行：

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

到：

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

sn-p：

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>