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

Anonim

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

scroll-snap-stopје опционално својство за елемент за помицање помицања у контејнеру за помицање помицања. За више информација о контејнерима за помицање помоћу помицања погледајте scroll-snap-typeунос алманаха.

scroll-snap-stopомогућава вам да присилите контејнер за помицање помицањем да се приквачи на одређени елемент. Претпоставимо да сте се кретали унутар контејнера за пуцање и дали сте му џиновски точак окретања миша. Уобичајено, прегледач би дозволио да брзина вашег померања прелети крај тачака приањања, док се не заустави на тачки прислањања близу места на којем би се помицање нормално завршавало. Подешавањем scroll-snap-stopможете да кажете прегледачу да се мора зауставити на одређеном елементу пре него што дозволи кориснику да га прође.

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

Синтакса

scroll-snap-stop: normal | always;

Вредности

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

  • normal је подразумевана вредност и омогућава премештању елемента без пуцања
  • always ће присилити прегледач да се приквачи на овај елемент, чак иако би помицање нормално пролазило поред овог елемента

Пример

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

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

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

Десктоп

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

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

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

Имајте на уму да Цхроме тренутно можда не подржава scroll-snap-stop: always;.

Повезан

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Ресурси

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