Поле прокрутки - CSS-хитрощі

Anonim

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

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

Введіть поле прокрутки

scroll-marginвикористовується для налаштування області прив'язки елемента (поле, яке визначає, куди буде прив'язаний елемент). Додавання scroll-marginкорисно, коли вам потрібно виділити простір елемента від краю контейнера, коли він зафіксований на місці, але враховуючи ситуації, коли кожен елемент може потребувати дещо іншого інтервалу. Якщо всі елементи мають однакові вимоги до інтервалу, розгляньте можливість використання scroll-paddingна батьківському контейнері, а не scroll-marginтому, що це впливає на інтервал для всіх елементів у контейнері.

Простий приклад, коли scroll-marginдопустимий інтервал 50 пікселів у верхній і лівій частині елемента виглядає так:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Рожева область представляє scroll-marginцей елемент.

Синтаксис

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

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

Цінності

scroll-marginприймає наступну довжину значення, яке записується аналогічна marginі інших властивостей , де значення може бути визначено з одиницями ( px, em, vhі т.д.). Додаткову інформацію див. У модулі значень та одиниць виміру W3C. Відсотки не можна використовувати для scroll-marginспецифікації.

Приклад

Див. Приклад прокрутки ручки
за допомогою 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