Как получить ширину полосы прокрутки браузера? ⇐ CSS

[Anonymous]

У меня есть несколько маленьких элементов, скажем, div (

Код: Выделить всё

200px

x 400 пикселей ПОСТОЯННО). Внутри каждого из них есть абзац примерно из 20 строк текста. Я хочу сделать следующее:

• Обычно div имеет свойство переполнения: скрыто.
• На мыши над (

  Код: Выделить всё

  :hover

  ) это свойство меняется на overflow: auto;, и появляется полоса прокрутки.

В чем проблема? Мне нужно немного места (отступы или поля) между текстом абзаца и полосой прокрутки. Допустим, этот абзац имеет симметричное поле: 20 пикселей;. Но после срабатывания :hover появляется полоса прокрутки, и вся правая часть абзаца перемещается на «ширину полосы прокрутки» пикселей влево. В других строках предложения разбиваются, и весь абзац выглядит по-другому, что весьма раздражает и не удобно для пользователя. Как мне настроить CSS так, чтобы единственным изменением после наведения курсора было появление полосы прокрутки?
Другими словами:

Код: Выделить всё

/* Normally no scrollbar */
div {display: block; width: 400px; height: 200px; overflow: hidden;}
/* On hover scrollbar appears */
div:hover {overflow: auto;}

/* Paragraph margin predicted for future scrollbar on div */
div p {margin: 20px (20px + scrollbarwidth px) 20px 50px;}
/* With scrollbar margin is symmetrical */
div:hover p {margin: 20px;} /* With scrollbar */

Я сделал для этого небольшой фрагмент с объяснением моей проблемы в строгом стиле. Надеюсь, все понятно . Я ищу решение уже почти два часа, поэтому считаю, что мой вопрос достаточно уникален и интересен.

Код: Выделить всё

div.demo1 {
width: 400px;
height: 200px;
overflow: hidden;
background: #ddd;
}
div.demo1:hover {
overflow: auto;
}
div.demo1 p {
background: #eee;
margin: 20px;
}
div.demo2 {
width: 400px;
height: 200px;
overflow: hidden;
background: #ddd;
}
div.demo2:hover {
overflow: auto;
}
div.demo2 p {
background: #eee;
margin: 20px 40px 20px 20px;
}
div.demo2:hover p {
margin: 20px 20px 20px 20px;
}

Код: Выделить всё

This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.

[b]As you can see, on hover right side of the paragraph "moves" left. But I want something like:[/b]

This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.  This is a long text. This is a long text. This is a long text.
This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text. This is a long text.

[b]But with a "perfect" scrollbar width (in this example I used 20px)[/b]

Подробнее здесь: https://stackoverflow.com/questions/283 ... lbar-width