scroll-marginје део ЦСС модула за помицање помицања. Помицање помицања се односи на „закључавање“ положаја оквира за приказ за одређене елементе на страници док се помиче прозор (или помични спремник). Замислите контејнер за помицање помицања као стављање магнета на врх елемента који се лијепи за врх оквира за приказ и приморава страницу да заустави помицање управо тамо.
scroll-marginје опционално својство за елемент за помицање помицања у контејнеру за помицање помицања. За више информација о контејнерима за помицање помоћу помицања погледајте scroll-snap-typeунос алманаха.
Унесите маргину померања
scroll-marginкористи се за подешавање подручја приањања елемента (оквир који дефинише где ће елемент бити прискочен). Додавање scroll-marginје корисно када елементу треба да дате простор од ивице контејнера када се заскочи на своје место, али дозвољавајући ситуације у којима би сваком елементу могао бити потребан мало другачији размак. Ако сви елементи имају исте захтеве за размаком, размислите о употреби scroll-paddingна надређеном контејнеру, scroll-marginјер то утиче на размак за све елементе у контејнеру.
Једноставан пример где scroll-marginдозвољени размак од 50 пиксела око врха и леве стране елемента изгледа овако:
.scroll-element ( scroll-margin: 50px 0 0 50px; )
scroll-marginовај елемент.
Синтакса
/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);Важна напомена о лонгхандовима: Цхроме (а можда и други прегледачи) тренутно не подржавају лонгханд формат scroll-paddingи scroll-marginсвојства. Користите скраћеницу за максималну подршку прегледача. Погледајте овај број на Цхроме Цхроме програму за проналажење грешака за више детаља и тренутни статус.
Вредности
scroll-marginприхвата следеће дужине вредност, која се пише као marginи других својстава где се вредност може дефинисати са јединицама ( px, em, vh, итд). Погледајте модул вредности и јединице В3Ц за више информација. Проценти се не могу користити за scroll-marginпо спецификацији.
Пример
Погледајте пример
додавања клизача оловком од ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 69 | 68 | 11 * | 79 | 11 |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | 11.0-11.2 |
Повезан
scroll-snap-typescroll-marginscroll-snap-alignscroll-snap-stop
Ресурси
- ЦСС Сцролл Снап В3Ц препорука кандидата
- Практично ЦСС Сцролл Снаппинг
- Представљамо вам ЦСС Сцролл Снап Поинтс