scroll-padding-block

Baseline Широко доступен

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Свойство сокращенной записи задаёт отступ для прокрутки элемента в блочном измерении.

Попробуйте

Свойства scroll-padding определяют смещения для оптимальной области просмотра области прокрутки: области, используемой в качестве целевой области для размещения элементов в поле зрения пользователя. Это позволяет автору исключить области области прокрутки, которые скрыты другим содержимым (например, панелями инструментов или сайдбарами с фиксированным позиционированием), или добавить больше места между целевым элементом и краями области прокрутки.

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

Синтаксис

/* Keyword values */
scroll-padding-block: auto;

/* <length> values */
scroll-padding-block: 10px;
scroll-padding-block: 1em 0.5em;
scroll-padding-block: 10%;

/* Global values */
scroll-padding-block: inherit;
scroll-padding-block: initial;
scroll-padding-block: revert;
scroll-padding-block: revert-layer;
scroll-padding-block: unset;

Значения

<length-percentage>: Внутренний отступ от соответствующего края области прокрутки, в виде допустимой длины или процента.
auto: Смещение определяется пользовательским агентом. Обычно это 0px, но пользовательский агент может определить и другое значение, если более уместно значение отличное от нуля.

Формальное определение

Начальное значение	как каждое из свойств сокращённой записи: `scroll-padding-block-start`: `auto` `scroll-padding-block-end`: `auto`
Применяется к	контейнерам прокрутки
Наследуется	нет
Проценты	относительно области прокрутки контейнера прокрутки
Вычисленное значение	как каждое из свойств сокращённой записи: `scroll-padding-block-start`: как указано `scroll-padding-block-end`: как указано
Тип анимации	по типу вычисленного значения

Формальный синтаксис

scroll-padding-block = 
  [ auto | <length-percentage [0,∞]> ]{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>

Спецификации

Спецификация
CSS Scroll Snap Module Level 1 # propdef-scroll-padding-block

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`scroll-padding-block`	69	79	68	56	15	69	68	48	15	10.0	69
`auto`	69	79	68	56	15	69	68	48	15	10.0	69

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-block