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/