How can I detect (and correct?) various scroll bar visibilities cross-browser?

Alan H.

Basically, I need to have (or fake) scrollbars showing up exactly at the same times in textarea and in a div (with white-space: pre-wrap, so as to treat whitespace the same), when their contents are the same.

In Webkit, this is easy:

textarea.foo, div.foo {
  overflow: auto; /* show scrollbars exactly when needed */
  /* also match padding, height, width, font, line-height, etc. */
}

But some other browsers (Firefox on OS X, I think, and IE7) will actually show a scrollbar on only the textarea and not the div (or vice versa) when the content isn’t long enough to require scrolling.

For clarity, I am not demanding that scrollbars show the same across all browsers. I need this to be true in all major browsers: A div and a textarea show scrollbars exactly whenever the other element does, given the same content, within the same browser. If that’s sometimes, always, or (on Safari/OS X Lion) never is inconsequential.