Отступы с правой стороны для вертикальной полосы прокрутки только с помощью CSS
Как я могу добавить правое дополнение (например, 8 пикселей) к моему элементу, только если вертикальная полоса прокрутки видна? Я хочу избежать добавления стандартных отступов для сохранения симметрии элементов. В моем случае я использую overflow-y как auto и флексбокс столбца.
Чтобы проиллюстрировать мою цель:
Я знаю, что могу сравнить scrollHeight и clientHeight, чтобы определить видимость вертикальной полосы прокрутки. Однако я хочу добиться этого без использования JavaScript, а только с помощью свойств CSS. Я пытался найти некоторые свойства CSS, такие как scroll-padding-right или scroll-margin-right, но, судя по их именам, похоже, они работают не так, как я ожидал. Я также попытался добавить левое поле к полосе прокрутки, ползуну полосы прокрутки, дорожке полосы прокрутки и т. д., но мне не удалось достичь своей цели.
Можно ли добиться заполнения полосы прокрутки, используя только CSS?
Заранее спасибо.
вы ищете неправильное ключевое слово. padding — внутренний пробел. Вам нужен внешний интервал: margin
Ответы 1
Только с помощью CSS невозможно выбрать контент с переполнением (хотя это обсуждалось [селекторы-5] Предложение для псевдоселектора :overflowed-content, но это привело бы к циклическим определениям).
Но вы можете добавить поле к полосе прокрутки (селекторы ::-webkit-scrollbar, ::-webkit-scrollbar-track и ::-webkit-scrollbar-thumb) с помощью свойств box-shadow и border.
Решения см. здесь: Как добавить поле к полосе прокрутки веб-кита CSS? [закрыто]
.scroller {
width: 300px;
height: 100px;
overflow-y: auto;
}
::-webkit-scrollbar {
width: 24px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 10px 10px #aeaeae;
border-left: solid 10px transparent;
border-top: none;
border-bottom: none;
border-right: solid 10px transparent;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 10px 10px #1496ce;
border-left: solid 10px transparent;
border-top: none;
border-bottom: none;
border-right: solid 10px transparent;
}<div class = "scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
earthnut pea peanut soko zucchini.
</div>Спасибо, это именно то, что мне нужно :) Я пробовал что-то подобное, но с отступами и полями для переполнения, но это не сработало. Отличная идея с использованием границ в качестве отступов.
Отвечает ли это на ваш вопрос? Как добавить поле к полосе прокрутки веб-кита CSS?