引导模式删除滚动条

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

这是一项功能，当您显示模式时，类modal-open将添加到HTML body，而在隐藏时将其删除。

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

.modal-open {
    overflow: hidden;
}

您可以通过指定

.modal-open {
    overflow: scroll;
}

在您自己的 CSS中。

我认为继承比滚动更好，因为当您打开模式时，它将始终使用滚动打开，但是当您没有任何滚动时，您将遇到相同的问题。所以我只是这样做：

.modal-open {
  overflow: inherit;
}

我用了

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

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

最好使用overflow-y：scroll并从正文中删除填充，引导模式将填充添加到页面正文中。

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

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

感谢上帝，我来过这个职位！我正在拔头发，试图弄清楚如何使用自己的关闭链接关闭窗口时恢复滚动条。我尝试了CSS的建议，但是它不能正常工作。看完之后

显示模态时，将把modal-open类添加到HTML正文中，而隐藏它时将其删除。-@flu​​p

我想出了一个使用jquery的解决方案，以防万一其他人遇到相同的问题并且上述建议不起作用-

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

我只是在使用Bootstrap模态的“功能”。似乎.modal该类具有此类，overflow-y:auto;因此当模式本身变高时，模式包装器将获得自己的滚动条。

如果您始终想要滚动条（设计人员经常这样做），请首先设置主体

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我添加的元素有关？

如果您将创建自己的css文件以自定义引导程序的特定部分，则更好。

请勿更改bootstrap的css文件，因为一旦在页面的其他部分中使用它，它将更改bootstrap中的所有内容。

如果页面较长，它将自动提供滚动条。当模式打开时，它将隐藏滚动条，因为这是引导程序的默认设置。

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

.modal-open {
    overflow: scroll;
}

反之亦然...

.modal-open {
    overflow: hidden;
}

此外，如果模式弹出窗口需要滚动显示内部内容，而父级窗口需要保持静止，则将以下内容添加到Custom.css（覆盖CSS）中

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}

bootstrap modal打开后会添加填充，因此您可以在自己的CSS中尝试此代码

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

这可能是由于第一个模态（当关闭时）从body元素中删除了modal-open类，而第二个模态在触发modal-open时不会将其添加回去。

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

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

这将一直等到第一个模态关闭，以确保从主体移除modal-open并在打开时重新添加。

我本人只是遇到了这个问题，很快就发现了这个问题，这有助于我理解造成这种现象的原因。那谢谢啦。

但是，我发现这些CSS解决方法不太好用。除非，也就是说，您明确要保留滚动条（尽管我认为没有理由）。

从根本上讲，Bootstrap在某些元素上应用了右填充，以补偿滚动条的移除。

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

即从此改变...

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