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

Anonim

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

Ово је корисно ако желите да зауставите прегледач на одређеним тачкама странице. На пример: Корисник који прегледава фотогалерију вероватно не жели да се помиче до пола слике - вероватно би волео да слика „скочи“ у прави положај док се креће. Пуцање помицањем даје програмерима чисти ЦСС начин за рјешавање овог понашања.

scroll-snap-typeје обавезно својство било ког помичног контејнера у који желите да додате привезивање клизача. Одговара на три питања за контејнер за помицање:

  1. Да ли контејнер користи пуцање помицања?
  2. На којој оси - к (хоризонтално), и (вертикално), блок или линијско - треба применити пуцање помицања?
  3. Како би требало да се понаша пуцање помицања? Да ли је присиљено у 100% случајева или ступа на снагу тек када се корисник „довољно приближи“ положају за пуцање? О томе више касније.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Синтакса

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Вредности

scroll-snap-type прихвата следеће вредности:

  • none онемогућава пуцање помицања.
  • x омогућава пуцање помицања само по к-оси.
  • y омогућава пуцање помицања само по и оси.
  • block омогућава пуцање помицања само по оси блока.
  • inline омогућава пуцање помицања само по линијској оси.
  • bothомогућава пуцање помицања по обје осе (што можете замислити као xи y, или inlineи block.
  • mandatory је вредност строгости која говори претраживачу да увек иде у положај снап када не дође до померања.
  • proximityје вредност строгости која говори претраживачу да пређе у положај снап-а ако се помицање приближи положају снап-а. Ако није прилично близу, прегледач не би требало да пукне и померање ће се понашати нормално.

Пример

Погледајте пример оловке за помицање оловке
помоћу ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.

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

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

Десктоп

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

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

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

Повезан

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ресурси

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