Превъртане-щракване-подравняване - CSS-трикове

Anonim

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

scroll-snap-alignе задължително свойство за елемент за превъртане в рамките на контейнер за превъртане. За повече информация относно контейнерите за scroll-snap-typeплъзгане при превъртане вижте записа в алманаха. scroll-snap-alignказва на браузъра, която е част от елемент трябва да бъде приведено в съответствие, когато едно щракване точка се среща: Трябва елемент прилепване към start, centerили endна родителския контейнер, който съдържа scroll-snap-typeимот?

Ако искате елемент да щракне на място в началото на този елемент, дайте му scroll-snap-alignстойност по следния начин:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Синтаксис

scroll-snap-align: ( none | start | end | center )(1,2)

Можете да посочите до 2 стойности за това свойство, представляващи съответно блоковата и вградената ос. Ако дадете само 1 стойност, тази стойност ще се използва и за двете оси.

Стойности

scroll-snap-align приема следните стойности:

  • none деактивира скролирането на елемента
  • start подравнява началото на елемента с моментното приспособление на контейнера за превъртане, когато е щракнато на място
  • end подравнява края на елемента с моментното приспособление на контейнера за превъртане, когато е щракнато на място
  • center подравнява центъра на елемента с моментното приспособление на контейнера за превъртане, когато е щракнато на място

Пример

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от 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-padding
  • scroll-snap-stop

Ресурси

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