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

Разбираемся в CSS
Ответить
Anonymous
 Как получить ширину полосы прокрутки браузера?

Сообщение Anonymous »

У меня есть несколько маленьких элементов, скажем, div ( x 400 пикселей ПОСТОЯННО). Внутри каждого из них есть абзац примерно из 20 строк текста. Я хочу сделать следующее:
  • Обычно div имеет свойство переполнения: скрыто.
  • На мыши над () это свойство меняется на 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»