bootstrap模式删除滚动条

Question

当我在页面中触发模态视图时,它会触发滚动条消失.这是一种恼人的效果,因为当模态移入/消失时,背景页面开始移动.这种效果有治愈方法吗？

Answer 1

这是一个功能,当您显示模式时,类modal-open会添加到HTML中body,而当您隐藏它时会删除它.

这使得滚动条消失,因为bootstrap css说

.modal-open {
    overflow: hidden;
}

您可以通过指定来覆盖它

.modal-open {
    overflow: scroll;
}

在你自己的 CSS.

Answer 2

我认为继承比滚动更好,因为当你打开模态时,它总是会打开滚动,但是当你没有任何滚动时,你会遇到同样的问题.所以我这样做:

.modal-open {
  overflow: inherit;
}

Answer 3

我用了

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

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

Answer 4

最好使用overflow-y:滚动并从body中删除padding,bootstrap modal将padding添加到page body.

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

IE浏览器兼容,IE浏览器默认做同样的事情.

Answer 5

感谢上帝,我来到这篇文章!当我用自己的关闭链接关闭窗口时,我正在试着弄清楚如何让我的滚动条回来.我尝试了CSS的建议,但它没有正常工作.看完之后

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

我想出了一个使用jquery的解决方案,所以任何其他人都有同样的问题,上述建议不起作用 -

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

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