Question

当我的模态弹出窗口打开时，它会在浏览器窗口的右侧添加一个垂直滚动条。我如何禁用此功能？我认为当模态窗口需要滚动时具有非常大的高度值时会启用此功能。我想禁用它，因为我的表格高度不超过窗口高度。

Answer 1

在你的CSS中添加：

body {
  overflow-y:hidden;
}

Answer 2

我在bootstrap 3.0.0中遇到了同样的问题。似乎.modal类具有overflow-y: scroll规则，导致滚动条始终可见。

所以，你可以在本地修改：

<div class="modal" ... style="overflow-y: auto;">
    ...
</div>

或全球：

<style>
.modal {
    overflow-y: auto;
}
</style>

Answer 3

将样式添加到正文：

body { 
  padding-right: 0px !important;
  overflow-y: hidden !important;
}

Answer 4

如果模型窗口高度不超过正常窗口高度，则显示滚动条没有任何意义。检查天气，用于淡化模型窗口后面背景的<div></div>具有比视点更高的高度。

Answer 5

如果您的表是div的子级，例如<div class="table-responsive">，请在父div标记中添加以下样式，以便div标记现在显示为：<div class="table-responsive" style="overflow-y: hidden">。

注意：：您的div可能会采用不同于.table-sensitive的其他样式，在这种情况下仍然可以使用。

您还可以在表格或 tbody 标记中覆盖样式，如果没有父div标记的样式可以使表格滚动，则这将很好地工作。如果有这样的父div标签，则在应用以下样式时，您仍然可以锁定表，使其无法滚动，但是包含父div的父菜单尽管已禁用，但仍会显示滚动条。因此，在表格标记中，它将是：<table style="overflow-y: hidden">，在 tbody 标记的情况下，它将是：<tbody style="overflow-y: hidden">

即使您的div，table或tbody标签正在应用来自外部（例如，引导程序）或自定义样式的其他样式，上述方法仍然有效。因此，如果您有<table class="table table-sm table-striped">之类的标签，您仍然可以这样做：<table class="table table-sm table-striped" style="overflow-y: hidden">

如果要同时禁用水平和垂直滚动，只需在style属性中添加以下内容，使其现在显示为：style="overflow-x: hidden; overflow-y: hidden"

Bootstrap：如何禁用垂直滚动条？

5 个答案: