Подложка за превъртане - CSS-трикове

Anonim

scroll-paddingе част от CSS Scroll Snap Module. Скролирането при превъртане се отнася до „заключване“ на позицията на прозореца за преглед към конкретни елементи на страницата, докато прозорецът (или превъртащият се контейнер) се превърта. Помислете за контейнер за щракане, като поставяне на магнит върху елемент, който се придържа към горната част на прозореца за показване и принуждава страницата да спре да превърта точно там.

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свойства от дългосрочен формат . Използвайте стенограмата за максимална поддръжка на браузъра. Вижте този проблем в хромовия инструмент за проследяване на грешки за повече подробности и текущото състояние.

Стойности

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

Ресурси

  • Препоръка за кандидатстване за W3C при превъртане на CSS
  • Практично прихващане на CSS превъртане
  • Представяме ви CSS Scroll Snap Points