Как показать всплывающую прокрутку Bootstrap 3 только при необходимости

У меня есть это всплывающее окно с полосой прокрутки

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;
 }

Я хочу показывать полосу прокрутки только тогда, когда это необходимо, то есть только тогда, когда высота всплывающего содержимого превышает высоту 200 пикселей. В то время полоса прокрутки всегда отображается, но не активна (конечно), когда высота меньше 200 пикселей. Как мне это сделать? Любая помощь будет принята с благодарностью. Спасибо!


scroll html css twitter-bootstrap popover
person Valentino S.    schedule 30.01.2014    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Вы можете использовать overflow:auto . Подробнее о свойстве переполнения читайте здесь.

person Community    schedule 30.01.2014

arrow_upward
7
arrow_downward

Установите для параметра overflow-y значение auto. Это будет показывать прокрутку только тогда, когда содержимое пересекает высоту 200 пикселей.

"overflow-y: auto;"

Это должно работать.

person winnyboy5    schedule 30.01.2014

arrow_upward
1
arrow_downward

После открытия всплывающего окна напишите settimeout и вычислите высоту всплывающего окна с помощью css.

Если высота больше требуемой, добавьте

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

Это поможет :)

person Sairam Venkata    schedule 30.09.2014