CSS: можно ли «вставить» полосы прокрутки Webkit в контент? - PullRequest
Новая
       3

CSS: можно ли «вставить» полосы прокрутки Webkit в контент?

16 голосов
/ 17 июля 2011

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

________________________________________
|                          |           |
|         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) (прозрачная рамка).

Ответы [ 2 ]

18 голосов
/ 28 июня 2013

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

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

6 голосов
/ 17 июля 2011

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

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

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

...