Заставить вертикальную полосу прокрутки на анимации

Question

У меня есть div, который анимируется с height: 0 до height: 80% (80% тела), и иногда содержимое в этом появившемся div будет больше, чем div, требуя полосу прокрутки.

Проблема в том, что полоса прокрутки не имеет значения при запуске анимации, и она появляется только тогда, когда это необходимо после анимации.(на самом деле это хорошо)

Но я привередлив, потому что я добавляю последние штрихи к своему сайту, и когда полоса прокрутки появляется случайным образом, она сдвигает контент влево и выглядит просто забавно.

Так что я хочу, чтобы полоса прокрутки была там все время, независимо.Возможно ли это?

Answer 1

Ваша анимационная библиотека должна установить overflow: hidden для внешнего элемента, поэтому полоса прокрутки исчезает.

Попробуйте обернуть содержимое в еще один div:

<!-- the outer element; pass this one to the animation lib -->
<div>
    <!-- the scroll bar will appear on this element -->
    <div style="overflow: scroll; height: 100%">
        <!-- content here -->
    </div>
</div>

Попробуйте этоздесь: http://jsfiddle.net/e3BkK/

Answer 2

Чтобы всегда отображать вертикальную полосу прокрутки, вы можете использовать

#yourDivId {
  overflow-y: scroll;
}

Если ваш контент имеет высоту меньше #yourDivId, то вертикальная полоса прокрутки будет отключена.

Если высота больше, то активируется вертикальная полоса прокрутки.

Answer 3

Добавьте overflow: scroll к элементу body через CSS: http://jsfiddle.net/GMcdf/1/.

body {
    overflow: scroll;
}