Сцролл-снап-алигн - ЦСС-трикови

Anonim

scroll-snap-alignје део ЦСС модула за помицање помицања. Помицање помицања се односи на „закључавање“ положаја оквира за приказ за одређене елементе на страници док се помиче прозор (или помични спремник). Замислите контејнер за помицање помицања као стављање магнета на врх елемента који се лијепи за врх оквира за приказ и приморава страницу да заустави помицање управо тамо.

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 поравнава центар елемента са снаппортом контејнера за помицање када је постављен на своје место

Пример

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
69 68 11 * 79 11

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 85 81 11.0-11.2

Повезан

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Ресурси

  • ЦСС Сцролл Снап В3Ц препорука кандидата
  • Практично ЦСС Сцролл Снаппинг
  • Представљамо вам ЦСС Сцролл Снап Поинтс