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