在bootstrap模式弹出窗口中删除垂直滚动条

Question

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

所以，我想删除此滚动条但仍能滚动。

任何帮助？

Answer 1

它可能对你有所帮助。修复隐藏的溢出将删除滚动条，要获取页面中的完整内容，请使用overflow auto to modal body

CSS：

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

Answer 2

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

Answer 3

因为你使用溢出：滚动; overflow属性的滚动值将滚动球线垂直和水平添加到两侧你应该使用overflow auto，这将只添加一个最需要它的一侧滚动

Answer 4

如果您使用的是Bootstrap版本4，则可以使用此CSS代码。

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

Answer 5

您还可以为此使用模式事件：

$("#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/