在引导模式弹出窗口中删除垂直滚动条答案

【问题标题】：Remove vertical scrollbar in bootstrap modal popup在引导模式弹出窗口中删除垂直滚动条
【发布时间】：2018-06-08 00:26:45
【问题描述】：

我的页面上有一个引导模式弹出窗口。弹出窗口有点长，所以html添加了垂直滚动条，动画效果看起来不太好。

所以，我想删除这个滚动条，但仍然可以滚动。

有什么帮助吗？

【问题讨论】：

你知道吗？截图不够，提供现场演示
浏览器兼容答案：stackoverflow.com/a/47807685/7186739

标签： html css twitter-bootstrap

【解决方案1】：

您也可以为此使用模态事件：

$("#modalID").on('shown.bs.modal', function(){
    /* Hide the body scrollbar. */
    document.body.style.overflow = "hidden";
});

$("#modalID").on('hidden.bs.modal', function(){
    /* Show the body scrollbar. */
    document.body.style.overflow = "auto";
});

事件可以在这里看到：https://mdbootstrap.com/docs/jquery/modals/events/

【讨论】：

【解决方案2】：

如果您使用的是 bootstrap 版本 4。您可以使用此 css 代码。

.modal-scrollbar-measure {
overflow: hidden !Important; }

【讨论】：

【解决方案3】：

那是因为你使用了溢出：滚动；溢出属性的滚动值在垂直和水平方向两侧添加滚动球线，您应该使用溢出自动，它只会添加最需要的一侧滚动

【讨论】：

【解决方案4】：

.modal 类具有overflow-y: scroll 规则，这导致滚动条始终可见。 https://stackoverflow.com/a/18715220/9143855

【讨论】：

【解决方案5】：

它可以帮助你。修复溢出隐藏将删除滚动条，要获取页面内的完整内容，请使用溢出自动到模态正文

CSS：

  .modal{
    overflow:hidden;
    }
    .modal-body{
    overflow:auto;
    }

【讨论】：