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

Posted 2023-03-06

【中文标题】Bootstrap：如何禁用垂直滚动条？

【英文标题】：Bootstrap : how to disable vertical scrollbar?

【发布时间】：2013-07-17 14:11:17

【问题描述】：

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

【问题讨论】：

这与 Bootstrap 关系不大。熟悉 Firebug 或 Chrome 的开发工具并检查 html 结构。根据需要使用 CSS 进行修改。

我怀疑这表明另一个问题——可能是错误的标记。请务必验证。

@isherwood - 这确实与引导程序有关。正如 alx 在下面的回答中所指出的，bootstrap 3 确实包含指令 .modal overflow-y: scroll;不知道为什么它不是自动的，但无论如何......

***.com/a/47807685/7186739

【参考方案1】：

在你的css中添加：

body 
  overflow-y:hidden;

【讨论】：

它还为body添加了一个modal-open类，它会在右边添加15px的边距，可能是为了补偿scollbar，但如果滚动条不可见，则将内容向左移动.添加此定义以删除：body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom margin-right: 0;

【参考方案2】：

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

所以，您可以在本地修改它：

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

或全局：

<style>
.modal 
    overflow-y: auto;

</style>

【讨论】：

不错1！这按预期工作，应该是选择的答案。谢谢。

问题是：为什么Bootstrap会这样设置？除非我确切地知道发生了什么，否则我不会碰它。提问于：github.com/twbs/bootstrap/issues/7972

我还必须从 body 标签中删除填充。所以这个组合对我有用。 .modal overflow-y: auto; .modal-open padding-right:0!important;

【参考方案3】：

将样式添加到正文：

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

【参考方案4】：

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

【参考方案5】：

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

注意：您的 div 可能应用了不同于 .table-responsive 的样式，在这种情况下这仍然有效。

您还可以覆盖 table 或 tbody 标签中的样式，如果没有父 div 标签的样式允许表格滚动，这将很有效。如果有这样的父 div 标签，当您应用以下样式时，您仍然可以锁定表格以防止滚动，但包含父 div 的滚动条仍将显示，尽管已禁用。因此，在 table 标记中，它将是：<table style="overflow-y: hidden"> 或在 tbody 标记的情况下：<tbody style="overflow-y: hidden">

即使您的 div、table 或 tbody 标签正在应用来自外部（例如 bootstrap）的其他样式或自定义样式，上述方法仍然有效。所以如果你有一个标签，比如<table class="table table-sm table-striped">，你仍然可以这样做：<table class="table table-sm table-striped" style="overflow-y: hidden">

如果你想禁用水平和垂直滚动，你只需要在你的样式属性中添加以下内容，这样它现在就变成了：style="overflow-x: hidden; overflow-y: hidden"