logo标签列表

Bootstrap 模态框移除滚动条

javascripttwitter-bootstrapmodal-dialog
114

当我在页面中触发模态视图时，它会导致滚动条消失。 这是一个令人讨厌的效果，因为当模态视图移动/消失时，背景页面开始移动。 有没有办法解决这个问题？

1
浏览器兼容性答案：https://dev59.com/jV8f5IYBdhLWcg3wEPIq#47807685 - Billu
15个回答
142

这是一个特性，当你展示模态框时，类modal-open会添加到HTML的body中，并在隐藏时移除。

这使得滚动条消失，因为Bootstrap CSS如下所示：

.modal-open {
    overflow: hidden;
}
您可以通过指定来覆盖此设置。
.modal-open {
    overflow: scroll;
}

在你自己的 CSS 中。

1
添加了一些更多的细节。现在更好了吗？ - flup
17
更合适的做法是使用overflow-y:scroll，这样可以更好地解决提问者的问题。使用overflow:scroll会在屏幕底部添加一个水平滚动条。 - Scott
1
完美，也适用于angular-strap模态框，可以在templateUrl内的<style></style>中简单地包含上述CSS，以便不会影响应用程序中的其他模态框。 - davidkonrad
3
请使用 overflow: inherit; 替代。这样，当你有滚动条时，模态框不会移除滚动条；没有滚动条时，也不会添加滚动条。 - Alisson Alvarenga
经历了相同的问题，但必须将CSS应用于.modal类，而不是.modal-open。 - GUIR
显示剩余2条评论
42

我认为使用inherit比scroll更好，因为当您打开模态框时，它将始终带有滚动条，但是当您没有滚动条时，将会出现同样的问题。所以我只是这样做：

.modal-open {
  overflow: inherit;
}
1
这才是真正的答案。在我的情况下，溢出滚动仍会影响某些元素。 - Coisox
经验丰富的人遇到了同样的问题，但不得不将CSS应用于.modal类而不是.modal-open。 - GUIR
30

最好使用overflow-y:scroll并从body中去除padding，Bootstrap模态框会在页面body上添加padding。

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

兼容IE浏览器：IE浏览器默认情况下会执行相同的操作。

1
谢谢。此外，如果模态弹出框需要滚动而父容器需要保持静止。.modal-body { max-height: calc(100vh - 210px); overflow-y: auto; } .modal-open { overflow: hidden; overflow-y: scroll; padding-right: 0 !important; } - Oracular Man
1
padding-right: 0 !important;确实非常重要。在我的情况下，即使滚动条启用，它仍会在模态框后面的原始页面上留下一个不可见的滚动条，并且仍然将页面向左移动，这正是我想要消除的。非常感谢您的答案！ - Yong
1
运行得非常好。就像@YongPin所说的那样；当模态框弹出时，它后面仍然显示着一个不可见的滚动条。padding-right: 0修复了它。 - Ibrahim Farooq
26

我使用了

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

在这种情况下，您避免显示水平滚动条。

我们可以将其与@Alisson Alvarenga的答案结合起来，使用overflow-y: inherit; - Dmitry Kurmanov
11

谢天谢地我看到了这篇文章！在使用自己的关闭链接关闭窗口时，我一直在苦苦寻找如何恢复滚动条。我尝试了CSS的建议，但它并没有正常工作。阅读后，我发现当你显示模态框时，HTML body会添加class modal-open，并在隐藏它时移除该class。（引用@flup）

我想出了一个使用jquery的解决方案，所以如果其他人遇到同样的问题，上面的建议不起作用，可以参考我的方法--

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>
我有一个问题，我重写了hide.bs.modal事件以便在模态窗口隐藏时执行一些自定义代码，但我没有意识到这会阻止modal-open类从body中删除-因此当关闭这个特定的模态窗口时我的滚动条没有出现。在我的hide.bs.modal代码中，我没有手动删除modal-open类，这就解决了这个问题。 - Jim
1
你只需要在链接中添加 data-dismiss="modal" 属性，而不需要像这样自定义任何内容。当单击该链接时，Bootstrap将执行所有适当的关闭操作。 - nollidge
1
"data-dismiss =“modal”在我的情况下无法工作，因为我正在调用Angular控制器中的函数。建议使用jQuery解决方案非常适合我。" - gianni
6

我刚刚在使用 Bootstrap 模态框的“特性”。看起来 .modal 类有 overflow-y:auto; 属性。当模态框本身变得太高时，模态框包装器就会有自己的滚动条。

如果你总想要一个滚动条（设计师经常这样做）。首先设置 body：

body {
    overflow-y:scroll;
}

然后处理 .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

在这种情况下，请勿触摸主体上的滚动条禁用

本页面上的所有其他答案都会使我的内容跳动。

注意！

尽管此解决方案一直适用于我，但昨天当模态框可拖动且太大以至于无法垂直适合屏幕时，我使用此修复程序遇到了问题。这可能与我添加的 position:sticky 元素有关？

当我添加了body{overflow-y:scroll;}，我的问题得到了解决。谢谢您，先生。 - FrenkyB
4
我对我自己起作用的唯一答案如下：
.modal-open {
  padding-right: 0 !important;
}
html {
  overflow-y: scroll !important;
}
这也是唯一对我有效的答案。谢谢！ - Stack Undefined
2
此外，如果模态弹出窗口需要与其内部内容一起滚动，并且父级需要保持静止，请将以下内容添加到Custom.css中（覆盖css）。
.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}
天才，这是我在BS5上唯一有效的方法。谢谢。 - demo7up
1
最好是创建自己的CSS文件来自定义Bootstrap的某个部分。不要更改Bootstrap的CSS文件，因为一旦在页面的其他部分中使用它，它将改变Bootstrap中的所有内容。
如果您的页面有点长，它会自动提供滚动条。当模态框打开时，它将隐藏滚动条，因为这是Bootstrap的默认设置。
为了避免在模态框打开时隐藏滚动条，只需通过在自己的CSS文件中放置以下CSS代码来覆盖它。
.modal-open {
    overflow: scroll;
}

只是反过来而已...

.modal-open {
    overflow: hidden;
}
3
如果你的答案与其他回答相同，请在编辑答案时澄清不同之处。只有当你有新的东西要补充时，才请添加新的回答。这似乎包含与此问题上其他答案相同的信息。 - Jeffrey Bosboom
1
它包含相同的答案，但有其他的解释方式。有时候，理解取决于它如何被解释。 - NormanCabilatazan
1
并非所有读者都能理解相同的想法。最好提供其他解释方式，以便他们能够清楚地理解。 - NormanCabilatazan
0

Bootstrap模态框在打开时会添加填充，因此您可以在自己的CSS中尝试此代码

.modal-open {
    padding: 0 !important;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接