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

Anonim

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

scroll-marginе незадължително свойство за елемент за превъртане в рамките на контейнер за превъртане. За повече информация относно контейнерите за scroll-snap-typeплъзгане при превъртане вижте записа в алманаха.

Въведете поле за превъртане

scroll-marginсе използва за регулиране на областта на щракване на елемент (полето, което определя къде ще бъде щракнат елементът). Добавянето scroll-marginе полезно, когато трябва да дадете пространство на елемент от ръба на контейнера, когато е щракнат на място, но като се вземат предвид ситуации, при които всеки елемент може да се нуждае от малко по-различно разстояние. Ако всички елементи имат едни и същи изисквания за интервали, помислете дали да не използвате scroll-paddingродителския контейнер, вместо scroll-marginзащото това засяга интервала за всички елементи в контейнера.

Един прост пример, където scroll-marginпозволява 50px разстояние между горната и лявата част на елемент изглежда така:

.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);

Важна забележка за longhands: Chrome (и вероятно други браузъри) понастоящем не поддържа longhand формат scroll-paddingи scroll-marginсвойства. Използвайте стенограмата за максимална поддръжка на браузъра. Вижте този проблем в хромиращия инструмент за проследяване на грешки за повече подробности и текущо състояние.

Стойности

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

Ресурси

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