CODEWITHSUNDEEP
javascripthtmlcssscrollbar
AlexMorley-Finch
AlexMorley-Finch

Reputation: 6965

Force vertical scroll bar on animation

I have a div that animated from height: 0 to height: 80% (80% of the body) and sometimes the content in this appearing div will be bigger than the div, requiring a scroll bar.

Problem is the scroll bar isn't apparant when the animation is running, and it only appears when it needs to after the animation. (kinda a good thing really)

But I'm being picky because I'm adding the final touches to my site and when the scroll bar randomly appears, it shifts the content left and it just looks funny.

So I want the scroll bar to be there all the time regardless. Is this possible?

Upvotes: 1

Views: 1117

Answers (3)

Jose Rui Santos
Jose Rui Santos

Reputation: 15319

To always display a vertical scroll bar, you can use

#yourDivId {
  overflow-y: scroll;
}

If your contained content has a smaller height than #yourDivId, then the vertical scroll bar appears disabled.

If it has a bigger height, then the vertical scroll bar becomes enabled.

Upvotes: 1

Arnaud Le Blanc
Arnaud Le Blanc

Reputation: 99921

Your animation library must be setting overflow: hidden on the outer element, which is why the scrollbar disappears.

Try wrapping the content in one more 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>

Try it here: http://jsfiddle.net/e3BkK/

Upvotes: 1

pimvdb
pimvdb

Reputation: 154898

Add overflow: scroll to the body element through CSS: http://jsfiddle.net/GMcdf/1/.

body {
    overflow: scroll;
}

Upvotes: 0

Related Questions