CSS: Можно ли "пропустить" полосы прокрутки Webkit в контент?

Обычно полоса прокрутки располагается так:

________________________________________
|                          |           |
|         content          | scrollbar |
|                          |           |
|                          |           |
|                          |           |
|                          |           |
|__________________________|___________|

Я в основном ищут разрыв между "пользовательской" полосой прокрутки и внешней границю прокручиваемого контейнера:

________________________________________
|                    |           |     |
|      content       | scrollbar | gap |
|                    |     <     |     | 
|                    |           |     |
|                    |           |     |
|                    |           |     |
|____________________|___________|_____|

Использование margin-right на ::-webkit-scrollbar или ::-webkit-scrollbar-track-piece завершается с ошибкой, и объявление полос прокрутки стиля для Webkit гласит:

Поля поддерживаются вдоль оси полосы прокрутки. Они могут быть отрицательный (так что дорожка может, например, накачаться, чтобы покрыть частично).

Теперь мне интересно, сумел ли кто-нибудь протащить полосы прокрутки "в" содержимое (или из обертки, если на то пошло), другими способами, чем margin.

Я предполагаю, что это возможно только (если вообще), используя какой-то трюк - любые идеи?

Другими вещами, которые я пробовал безуспешно, являются padding-right: 10px и border-right: 10px solid rgba(255, 255, 255, 0) (прозрачная рамка).

Ответ 1

Я думаю, что это невозможно, назначив правое поле для выравнивания по правому краю. Полоса прокрутки является частью окна-интерфейса и не может быть написана с помощью CSS.

Однако вы можете просто создать обертку содержимого вокруг всех других элементов вашего HTML, дать ей максимальную ширину, которая меньше 100% и установить overflow: scroll; для обертки. Это позволит добиться желаемого эффекта и работать практически во всех браузерах.

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

Ответ 2

Вы можете сделать это с прозрачной рамкой. Но вам нужно установить background-clip: padding-box;, иначе это не сработает.

Пример: http://jsfiddle.net/6KprJ/1/