Question

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

html {
    overflow-y: scroll; 
}

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

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

我想尝试以下方法：

1）我希望即使模态打开也启用主滚动条

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

Answer 1

尝试更改此行：

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

为：

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

摘录：

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>

打开Bootstrap模式时禁用滚动条

1 个答案: