jQuery adding/removing DOM elements: Scrollbar issue

Question

I wrote a jQuery function that dynamically adds or removes messages boxes from the DOM. Depending on the site's content and the number of message boxes, the browsers scrollbar appears. Sometimes, only the appearing of one message box causes that scrollbar. When this box is removed, the scrollbar disappears and the whole site jumps a few pixels sideways. Is there any way to fix it?

I've tried overflow: hidden on the body. This works of course, but is also pointless because then you can not scroll the site's content.

Answer 1

You can use overflow-y: scroll which will force a scrollbar to appear (being visible, but disabled, when there is nothing to scroll). See: http://html5boilerplate.com/docs/css/#html- (also for possible pitfalls)