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

[Anonymous]

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

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

200px

x 400px постоянная). Внутри каждого из них есть абзац с примерно 20 строками текста. Я хочу сделать: < /p>

• Обычно div имеет переполнение: hidden < /code> свойство. < /Li>
  На мышью (

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

  :hover

  ) Это свойство изменено на переполнение: Auto; , и появляется прокрутка.

В чем проблема? Я хочу небольшое пространство (прокладки или поля) между текстом абзаца и половой прокручиванием. Допустим, абзац имеет симметричный край: 20px; . Но после: Hover запускается, появляется прокрутка, и вся правая сторона абзаца перемещается «ширина Scrollbar» PX слева. Предложения разбиты в других строках, и весь абзац выглядит по -разному, что довольно раздражает и не удобно для пользователя. Как я могу установить свой CSS, поэтому единственным изменением после падения станет внешний вид Scroolbar? < /P>
Другими словами: < /p>

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

/* 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 */

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

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

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;
}< /code>


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.

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