Question

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

Answer 1

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

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

.modal-open {
    overflow: hidden;
}

您可以通过指定

来覆盖它

.modal-open {
    overflow: scroll;
}

在你自己的 css。

Answer 2

我用过

var rxConflicts = angular.module('rxConflicts', []);

rxConflicts.controller('MainController', function($scope, $http){
    $scope.getRxcui = function(event){

        // getting the value for each medicine input
        var medValue = $(this).value;
        console.log(medValue);

    }
});

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

Answer 3

我认为继承比滚动更好，因为当你打开模态时，它会一直打开滚动，但当你没有任何滚动时你会得到同样的问题。所以我就是这样做的：

.modal-open {
  overflow: inherit;
}

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

我正在玩这个＆＃39;功能＆＃39; 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元素有关？

Answer 7

如果你要创建自己的CSS，那就更好了用于自定义bootsrap的某个部分的文件。

不要改变bootstrap的css文件，因为一旦你在页面的其他部分使用它，它将改变你的引导程序中的所有内容。

如果您的页面有点长，它会自动提供滚动条。当模态打开时，它将隐藏滚动条，因为这是默认的bootstrap。

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

.modal-open {
    overflow: scroll;
}

反之亦然......

.modal-open {
    overflow: hidden;
}

Answer 8

对我有用的唯一答案是：

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

Answer 9

bootstrap模式一旦打开就会添加一个填充，这样你就可以在自己的css中尝试这个代码

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

Answer 10

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

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

Answer 11

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

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

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

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

Answer 12

我本人只是遇到了这个问题，很快就发现了这个问题，这帮助我了解了导致此问题的原因。所以谢谢。

但是，我发现这些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>

bootstrap模式删除滚动条

12 个答案: