Question

我有这个弹出框，带有滚动条

HTML

<ul class="navbar-nav pull-right"> 
<li><a href="#" data-toggle="popover" title="Notifications" data-html="true" data-content="<a href='?Profile'><div class='pop-text'>Notification 1</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 2</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 3</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 4</div></a><hr /><div><p id='foot-notification-pop'><a href='?notification'>Show all</a></p></div>">Notification</a></li>
</ul>

CSS

.popover-content {
  height: 200px;
  overflow-y: scroll;
 }

我想仅在需要时显示滚动条，只有当popover-content的高度超过200px的高度时才会显示。当滚动条始终显示时，但当高度小于200px时，不可点击（当然）。我该怎么做？任何帮助将不胜感激。谢谢！

Answer 1

您可以使用overflow:auto。在此处详细了解overflow property

Answer 2

将overflow-y设置为auto。仅当内容超过200px高度时，才会显示滚动。

"overflow-y: auto;"

这应该有用。

Answer 3

打开popover后，写一个settimeout并用css计算popover的高度。

如果身高超过要求，请添加

$("popover-content").css("max-height", "200px");
$("popover-content").css("overflow-y", "auto");

这将有助于：）

如何仅在需要时显示Bootstrap 3 popover

3 个答案: