Автоматическое скрытие вертикальных полос прокрутки с использованием переполнения css

Я столкнулся с проблемой, использующей css-переполнение для автоматического закрепления вертикальной полосы прокрутки. Я прочитал в нескольких статьях, чтобы использовать псевдо-класс css hover для достижения такого поведения, и хорошо, что я в какой-то степени успешный.

Я использовал "прокрутку" и "авто" для свойства overflow-y. С прокруткой он работает как шарм, но с "прокруткой" проблема даже в том случае, если нет необходимости показывать полосу прокрутки, видно, что я чувствую, что "авто" очень хорошо работает.

Но опять же с "авто" проблема заключается в 16px (я предполагаю) пробел в правой части. Вероятно, это ширина полосы прокрутки. Мне нужна полная ширина. Я использовал фон для объяснения моей проблемы.

Вот скрипка. http://jsfiddle.net/9scJE/

div.autoscroll {
    height: 200px;
    width: 400px;
    overflow: hidden;
    border: 1px solid #444;
    margin: 3em;
}

div.autoscroll:hover {
    /* overflow-y: scroll; */
    overflow-y: auto;
}

Оцените любую помощь.

Ответ 1

На самом деле это похоже на ошибку браузера, но, похоже, она работает так, как вы хотите, если вы добавите padding-right: 1px при зависании.

div.myautoscroll:hover {
     overflow: auto;
     padding-right: 1px;
}

http://jsfiddle.net/ExplosionPIlls/9scJE/1/

Ответ 2

Вы можете добавить width: 100%; при наведении на div:

 div.myautoscroll:hover {
     overflow: auto;
     width: 100%;
 }

Рабочий демонстрационный пример

Ответ 3

Вы должны компенсировать прокрутку с помощью прокладки.

div.autoscroll:hover {
    /* overflow-y: scroll; */
    overflow-y: scroll;
padding-right: 16px;

}

Однако лучше сделать это с помощью javascript, так как ширина полосы прокрутки может немного отличаться между браузерами. Я успешно использовал это решение: Как рассчитать ширину полосы прокрутки?