引导模式删除滚动条

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

这是一个function,当你显示模态时, modal-open类会被添加到HTML body ,当你隐藏它的时候会被删除。

这使得滚动条自引导CSS说,消失

 .modal-open { overflow: hidden; } 

你可以通过指定来覆盖这个

 .modal-open { overflow: scroll; } 

你自己的 CSS。

我用了

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

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

我认为inheritance滚动更好,因为当你打开模式时,它总是以滚动方式打开,但是当你没有任何滚动时,你将会遇到同样的问题。 所以我只是这样做:

 .modal-open { overflow: inherit; } 

感谢上帝,我来过这个post! 我正在拉我的头发,试图找出如何使用我自己的closures链接closures窗口时返回滚动条。 我尝试了CSS的build议,但它只是没有正常工作。 看完之后

当你显示模态时,类的模态打开被添加到HTML主体,当你隐藏它时被移除。 – @flup

我想出了一个解决scheme,使用jquery,所以incase其他人有相同的问题,上述build议不工作 –

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

我只是在玩Bootstrap模态的这个“特征”。 似乎.modaloverflow-y:auto; 所以模态包装器在模态本身变高的时候会得到自己的滚动条。

如果你总是想要一个滚动条(devise师经常这样做)首先设置正文

 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 */ } 

在这种情况下,请不要在滚动条上禁用滚动条

本页面上的所有其他答案不断让我的内容跳跃。

抬头!

虽然这个解决scheme一直在为我工作,昨天我遇到了一个问题,当模式是可拖动的时候,使用这个修补程序的时候会很大,以适应屏幕(垂直)。 这可能与position:sticky我添加的position:sticky元素?

更好的是,如果你将创build自己的CSS文件来定制你的靴子的某个部分。

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

如果你的页面有点长,它会自动提供一个滚动条。 而当模式打开时,它将隐藏滚动条,因为这是默认的引导程序。

为了避免在打开模式时隐藏它,只需将css代码放在自己的css文件中即可覆盖它。

 .modal-open { overflow: scroll; } 

只是一个反之亦然…

 .modal-open { overflow: hidden; }