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

Anonim

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

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

ОК, прелазимо на додавање клизача

scroll-paddingкористи се за подешавање оптималног подручја гледања контејнера за пуцање. Ово је корисно ако контејнер има елементе као што је фиксно заглавље који би заклањао елементе унутар њега или ако помични контејнер треба мало простора да унутрашњим елементима да простора за дисање након што се "заскоче" на своје место.

Једноставан пример био би коришћење scroll-paddingза стварање одређеног размака 50pxна врху и лево од контејнера:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Подручја у ружичастој боји показују превлаке за померање на контејнеру за померање при померању.

Синтакса

/* Shorthand */ scroll-padding: ( | auto )(1,4); /* Longhands */ scroll-padding-top: | auto; scroll-padding-right: | auto; scroll-padding-bottom: | auto; scroll-padding-left: | auto; /* inline-specific and block-specific properties as well */ scroll-padding-block: ( | auto )(1,2); scroll-padding-inline: ( | auto )(1,2);

Важна напомена о лонгхандовима: Цхроме тренутно не подржава лонгханд формат scroll-paddingи scroll-marginсвојства. Користите скраћеницу за максималну подршку прегледача. Погледајте овај број на програму Цхроме Цхроме за проналажење грешака за више детаља и тренутни статус.

Вредности

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

  • autoоставља да допуне одређује прегледач / кориснички агент. Генерално, ово значи вредност од 0пк, али може бити и нула ако кориснички агент одлучи да је нека друга вредност примеренија.
  • пише сличним paddingи друга својства којима се вредност може дефинисан са јединицама ( px, em, vh, итд) или као проценат самог контејнера.

Пример

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

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

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

Десктоп

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

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

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

Повезан

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ресурси

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