scroll — padding
Задаёт отступ от краёв контейнера прокрутки, внутри которых браузер старается не размещать целевые элементы.
Пример
Скопировать ссылку «Пример» Скопировано
При переходе по якорной ссылке браузер не домотает 100 пикселей до элемента, от верхнего края окна браузера до ссылки будет отступ.
html scroll-padding-top: 100px;>html scroll-padding-top: 100px; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
scroll — padding задаёт отступы таким же образом как и padding и имеет такой же набор CSS-свойств для каждой из сторон:
Физические:
- scroll — padding — top ;
- scroll — padding — right ;
- scroll — padding — bottom ;
- scroll — padding — left .
Логические:
- scroll — padding — block — start ;
- scroll — padding — inline — start ;
- scroll — padding — block — end ;
- scroll — padding — inline — end .
Горизонтальные отступы не влияют на вертикальную прокрутку, и наоборот.
Как понять
Скопировать ссылку «Как понять» Скопировано
Представьте блок с полосой прокрутки. У такого блока видна только часть содержимого, определяемая его шириной и высотой за вычетом полос прокрутки. Эта видимая область называется скроллпорт (scrollport), по аналогии с вьюпорт (viewport) — видимой областью всего экрана.
Переход по якорной ссылке (как и scroll Into View ) говорит браузеру прокрутить контейнер так, чтобы целевой элемент попал в скроллпорт. По умолчанию, браузер домотает до начала блока, тем самым верхняя грань блока будет совпадать со скроллпортом.
Тут можно столкнуться с визуальными проблемами:
- Целевые элементы прилипают к верху экрана, им не хватает отступа.
- Фиксированные к верху экрана элементы перекрывают целевой элемент.
scroll — padding решает эти проблемы, никак не изменяя макет страницы. Его значения сокращают скроллпорт, создавая оптимальную для показа контента область. В ней браузер старается размещать целевые блоки. Высота этой области будет использоваться при выполнении операций постраничной прокрутки (например, при нажатии PgDown ).
Свойство не изменяет макет страницы. Если вы добавите селектору html CSS-правило scroll — padding — top : 100px , то отступ в 100 пикселей сверху не появится. Свойство влияет только на расчёты положения прокрутки.
Как создать горизонтально прокручиваемые контейнеры
Контейнеры с горизонтальной прокруткой становятся все более популярными. Особенно среди мобильно оптимизированных сайтов, где они используются для уменьшения высоты веб-страниц.
После реализации нескольких таких элементов я захотел выяснить, как с помощью минимального объема кода создать горизонтальную прокрутку, которая корректно работает, на всех типах пользовательских устройств.
Сначала создадим контейнер и дочерние div внутри него, которые будут прокручиваться по горизонтали.
Card
Card
Card
Card
Card
Card
Card
Card
Card
