Javascript 引导模式删除滚动条

当我在页面中触发模式视图时，它会触发滚动条消失。这是一个恼人的效果，因为当模式移入/消失时背景页面开始移动。这是一个特性，当你显示模态时，class

modal open

会被添加到HTML

body

，当你隐藏模态时，class

会被删除

这会使滚动条消失，因为引导css显示

.modal打开{
溢出：隐藏；
}

可以通过指定

.modal打开{
溢出：滚动；
}

在您自己的css中。
如果您将创建自己的css，效果会更好
文件以自定义引导映射的特定部分

不要改变引导的css文件，因为一旦你在页面的其他部分使用它，它会改变引导中的一切

如果您的页面有点长，它将自动提供一个滚动条。
当模式打开时，它会隐藏滚动条，因为这是引导默认的功能

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

.modal-open {
    overflow: scroll;
}

正好相反

.modal-open {
    overflow: hidden;
}

我曾经

在这种情况下，您可以避免显示水平滚动条
感谢上帝，我看到了这篇文章！当我用自己的close链接关闭窗口时，我正在绞尽脑汁想如何恢复滚动条。我尝试了CSS的建议，但效果不太好。读后

显示模式时，会将类模式打开添加到HTML正文中，
当你把它藏起来的时候，它就被移除了@flup

我提出了一个使用jquery的解决方案，以防其他人也有同样的问题，并且上面的建议不起作用--


jQuery（文档）.ready（函数（）{
jQuery（'.closeit'）。单击（函数（）{
jQuery（'body'）.removeClass（'modal-open'）；
});
});
我认为继承优于滚动，因为当您打开modal时，它将始终使用滚动打开，但当您没有任何滚动时，您将遇到相同的问题。所以我就这么做：

.modal-open {
  overflow: inherit;
}

我只是在玩引导模态的这个“特性”。
似乎
.modal
类具有
溢出-y:auto因此当模态本身变高时，模态包装器会获得自己的滚动条

如果你总是想要一个滚动条（设计师经常这样做）
先把身体放好

body {
    overflow-y:scroll;
}

然后处理
。模式打开

.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
元素有关？
最好使用overflow-y：滚动并删除正文中的填充，引导模式将填充添加到页面正文中

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

IE浏览器兼容：IE浏览器默认做相同的事情。
引导模式打开后会添加一个填充，以便您可以在自己的css中尝试此代码

.modal-open {
    padding: 0 !important;
}

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

这可能是因为第一个模态（关闭时）从主体元素中删除模态打开类，而第二个模态在触发模态打开时不会将其添加回

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

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

这将一直等到第一模态关闭，以确保模态打开已从车身上移除，并在打开时重新添加。
我自己也遇到了这个问题，快速发现这个问题有助于我了解导致该行为的原因。谢谢

然而，我发现这些CSS解决方案有点不雅观。除非，也就是说，您特别想要保留滚动条（尽管我想不出这样做的原因）

本质上，引导是将填充应用到某些元素，以补偿删除滚动条

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

i、 e.从这个改变

<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>


…此内容不会移动。。。
唯一对我有效的答案是：

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

你能更具体一点吗？增加了一些细节。现在更好了？使用overflow-y:scroll更合适，我认为它更符合OPs问题的意图。使用overflow:scroll将在屏幕底部添加一个水平滚动条。perfect也适用于angular strap modals，可以简单地将上述CSS包含在
模板URL
中，这样就不会影响应用程序中的其他modals。使用overflow:inherit；相反这样，当您有滚动条时，模式不删除滚动条，当您没有滚动条时，模式不添加滚动条。这似乎包含与此问题的其他答案相同的信息。如果您的答案不同，请编辑它以澄清到底是什么不同。如果您有新的答案，请仅添加新答案。它包含相同的答案，但有其他解释方式。有时，理解取决于如何解释。并非所有读者都能得到相同的想法。最好给出其他解释方法，让他们清楚地理解。我遇到了一个问题，我重写了hide.bs.modal事件，以便在模式被隐藏时执行一些自定义代码，但我没有意识到的是，它阻止了modal open类从主体中移除，因此在关闭这个类时，我的滚动条没有返回
<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>

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