Прокрутка - CSS-хитрощі

Anonim

scroll-paddingє частиною модуля CSS Scroll Snap. Прив'язка прокрутки означає "блокування" положення області перегляду до певних елементів на сторінці, коли прокручується вікно (або прокручуваний контейнер). Подумайте про контейнер для прокрутки, як надягання магніту поверх елемента, який прилипає до верхньої частини області перегляду, і змушує сторінку зупинити прокрутку саме там.

scroll-paddingє необов’язковою властивістю для будь-якого контейнера, що прив'язує прокрутку. Контейнери з прокручуванням визначаються, коли для scroll-snap-typeвластивості встановлюється будь-яке значення, крім того none. Для отримання додаткової інформації про контейнери, що закріплюють прокрутку, див. scroll-snap-typeЗапис альманаху.

Добре, переходимо до прокрутки

scroll-paddingвикористовується для регулювання оптимальної області перегляду контейнера для прив'язки. Це корисно, якщо контейнер має такі елементи, як фіксований заголовок, який закриває елементи всередині, або якщо прокручуваний контейнер потребує місця, щоб дати елементам інтер’єру можливість дихати після того, як вони будуть “зафіксовані” на своєму місці.

Простим прикладом було б використання scroll-paddingдля створення певного фіксованого інтервалу 50pxу верхній та лівій частині контейнера:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Області в рожевому кольорі відображають прокрутку на контейнері для прив’язки прокрутки.

Синтаксис

/* Shorthand */ scroll-padding: ( | auto )(1,4); /* Longhands */ scroll-padding-top: | auto; scroll-padding-right: | auto; scroll-padding-bottom: | auto; scroll-padding-left: | auto; /* inline-specific and block-specific properties as well */ scroll-padding-block: ( | auto )(1,2); scroll-padding-inline: ( | auto )(1,2);

Важлива примітка щодо лонгхендів: Chrome на даний момент не підтримує формат scroll-paddingта scroll-marginвластивості longhand . Використовуйте скорочення для максимальної підтримки браузера. Докладніше та поточний стан див. У цій проблемі на відстежувачі помилок Chrome.

Цінності

scroll-padding приймає такі значення:

  • autoзалишає заповнення, яке визначається браузером / агентом користувача. Як правило, це означає значення 0px, але може бути ненульовим, якщо користувальницький агент вирішить, що інше значення є більш доцільним.
  • написано , схожі на paddingі інші властивості , де значення може бути визначено з одиницями ( px, em, vhі т.д.) або як відсоток від самого контейнера.

Приклад

Див. Приклад прокрутки ручки
за допомогою CSS-Tricks (@ css-tricks) на CodePen.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
69 68 11 * 79 11

Мобільний / планшетний

Android Chrome Android Firefox Android iOS Safari
88 85 81 11,0-11,2

Пов’язані

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ресурси

  • Рекомендація кандидата у програму CS3 Scroll Snap
  • Практичне прив'язування прокрутки CSS
  • Представляємо точки прив'язки CSS Scroll