引导模式删除滚动条

Posted 2023-02-22

【中文标题】引导模式删除滚动条

【英文标题】：bootstrap modal removes scroll bar

【发布时间】：2014-09-24 01:29:02

【问题描述】：

当我在页面中触发模式视图时，它会触发滚动条消失。这是一个令人讨厌的效果，因为当模态移入/消失时背景页面开始移动。有没有办法治愈这种影响？

【问题讨论】：

浏览器兼容答案：***.com/a/47807685/7186739

【参考方案1】：

这是一项功能，当您显示模式时，类 modal-open 会添加到 html body，而当您隐藏它时会被删除。

这使得滚动条消失，因为引导 css 说

.modal-open 
    overflow: hidden;

您可以通过指定覆盖它

.modal-open 
    overflow: scroll;

在你自己的 css中。

【讨论】：

你能说得具体点吗？

添加了更多细节。现在好点了吗？

使用overflow-y:scroll 更合适，我认为它更好地解决了OPs 问题的意图。使用 overflow:scroll 会在屏幕底部添加一个水平滚动条。

完美，也适用于 angular-strap 模态，可以简单地将上述 CSS 包含在 <style></style> 内的 templateUrl 中，因此它不会影响应用程序中的其他模态。

使用溢出：继承；反而。这样，当你有滚动时模态不会删除滚动，当你没有滚动时不会添加滚动

【参考方案2】：

如果您将创建自己的 css，那就更好了 文件来自定义引导程序的某个部分。

不要更改 bootstrap 的 css 文件，因为一旦您在页面的其他部分使用它，它会改变您的 bootstrap 中的所有内容。

如果您的页面有点长，它会自动提供滚动条。 当模式打开时，它将隐藏滚动条，因为这是引导程序默认执行的操作。

为避免在打开模式时隐藏它，只需将 css 代码（如下）放在您自己的 css 文件中即可覆盖它。

.modal-open 
    overflow: scroll;

反之亦然...

.modal-open 
    overflow: hidden;

【讨论】：

这似乎包含与此问题的其他答案相同的信息。如果您的答案不同，请对其进行编辑以阐明究竟有什么不同。请仅在您有新内容时添加新答案。

它包含相同的答案，但有其他解释方式。有时，理解取决于如何解释。

并非所有读者都能得到相同的想法。最好用其他方式来解释，让他们看清楚。

【参考方案3】：

我用过

.modal-open 
  overflow-y: scroll;

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

【讨论】：

我们可以将它与@Alisson Alvarenga 的答案结合使用溢出-y：继承；

【参考方案4】：

感谢上帝，我遇到了这个帖子！当使用我自己的关闭链接关闭窗口时，我正在拉扯我的头发试图弄清楚如何让我的滚动条回来。我尝试了 CSS 的建议，但它只是无法正常工作。看完后

类 modal-open 会在您显示模态时添加到 HTML 正文中， 并在隐藏时删除。 -- @flup

我想出了一个使用 jquery 的解决方案，所以如果其他人有同样的问题并且上述建议不起作用--

<script>
            jQuery(document).ready(function () 
jQuery('.closeit').click(function () 
 jQuery('body').removeClass('modal-open');
                );
            );
        </script>

【讨论】：

我遇到了一个问题，我覆盖了 hide.bs.modal 事件，因此我可以在隐藏模式时执行一些自定义代码，但我没有意识到的是停止了模式打开类从正文中删除 - 因此关闭这个特定模式时我的滚动条没有回来。我没有在 hide.bs.modal 代码中手动删除 modal-open 类，它解决了这个问题。

您应该只需要为您的链接添加一个data-dismiss="modal" 属性，而不是像这样进行任何自定义操作。单击该链接时，Bootstrap 将执行所有适当的关闭操作。

data-dismiss="modal" 在我的情况下不起作用，因为我在角度控制器中调用了一个函数。建议的 jQuery 解决方案对我来说效果很好。

【参考方案5】：

我认为 inherit 比 scroll 更好，因为当你打开 modal 时，它总是会滚动打开，但是当你没有任何滚动时，你会得到同样的问题。所以我只是这样做：

.modal-open 
  overflow: inherit;

【讨论】：

这是真正的答案。在我的情况下，溢出滚动仍然会影响某些元素。

遇到了同样的问题，但是不得不将 CSS 应用到 .modal 类而不是 .modal-open

【参考方案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 元素有关？

【讨论】：

当我添加了 bodyoverflow-y:scroll; 后，我的问题就解决了。谢谢你，先生。

【参考方案7】：

最好使用overflow-y:scroll 并从body 中移除padding，bootstrap modal 为page body 添加了padding。

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

IE浏览器兼容：IE浏览器默认做同样的事情。

【讨论】：

谢谢。此外，如果模态弹出窗口需要滚动并且父级需要保持静止 .modal-body max-height: calc(100vh - 210px);溢出-y：自动； .modal-open 溢出：隐藏；溢出-y：滚动； padding-right: 0 !important;

padding-right: 0 !important; 确实很重要。就我而言，即使启用了滚动条，它也会在模式后面的原始页面中留下一个不可见的滚动条，并且仍然将页面移动到左侧，这就是我要删除的内容。非常感谢您的回答！

工作就像一个魅力。正如@YongPin 所说；当模态弹出时，它后面仍然显示一个不可见的滚动条。 padding-right: 0 修复了它。

【参考方案8】：

引导模式在打开后会添加一个填充，因此您可以在自己的 css 中尝试此代码

.modal-open 
    padding: 0 !important;

【参考方案9】：

此外，如果模态弹出窗口需要滚动其中的内容并且父级需要保持静止，请将以下内容添加到您的 Custom.css（覆盖 css）

.modal-body 
    max-height: calc(100vh - 210px);
    overflow-y: auto;

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

【参考方案10】：

这可能是由于第一个模态（关闭时）从正文元素中删除了模态打开类，而第二个模态在触发模态打开时不会将其添加回来。

在这种情况下，我会使用事件来检查模态是否已完全关闭/隐藏并打开另一个

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) 
   $modal2.modal('show');
);

这将等到第一个 modal 关闭，以确保 modal-open 从正文中删除并在打开时重新添加。

【参考方案11】：

我自己也遇到了这个问题，很快发现这个问题帮助我了解了导致这种行为的原因。所以谢谢。

但是，我发现这些 CSS 变通方法有点不雅。除非，也就是说，您特别想保留滚动条（尽管我想不出这样做的原因）。

本质上，Bootstrap 正在对某些元素应用 padding-right 以补偿移除滚动条。

因此，您需要做的就是在有问题的元素周围放置一个零填充的额外包装器（并将目标类移到它上面）。

即从此改变...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

...到这个...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>

【参考方案12】：

对我有用的唯一答案如下：

.modal-open 
  padding-right: 0 !important;

html 
  overflow-y: scroll !important;

【讨论】：

这也是唯一对我有用的答案。谢谢！

【参考方案13】：

在我的例子中，bootstrap 通过打开模式将margin-left: -17px 添加到我的侧边栏元素中。我对此的解决方案是将m-0 类添加到侧边栏。