Увод у ЦСС Сцролл Снап Поинтс

Тхе ЦСС Сцролл Снап Модуле је веб стандард који нам даје одређену контролу померање на веб страници тако да можемо натерати кориснике да се померају до одређених делова странице, а не само било где на њему.

Померање је једна од најуспешнијих акција на веб сајту. Прегледници, током година, имају побољшали су своје перформансе померања да се прилагоди агилној снази прста корисника. И, програмери имају користи креативно померање за постизање бољег или изваншколског корисничког искуства.

Међутим, када је у питању корелација између кодирање и скроловање, чини се да је само ЈаваСцрипт имао контролу над овим другим. То је било тако дуго времена, али са увођење сцролл снап тачака, ЦСС је почео да надокнађује.

Померање без сцролл снап тачака

Обично се не крећемо веома споро, посебно на телефонима. Што се брже крећете, мање контроле имате где ћете на екрану завршити када сте престали да се померате.

Замислите да се крећете кроз низ слика производа на веб локацији или у галерији фотографија или слајдова на мрежи. Оно што желите у таквим апликацијама је да погледајте цео производ, фотографију или слајд сваки пут када се померате. Не само а дио слике, фотографије или слајда.

На пример, на доњој демо верзији можете видети када корисник престане да се помера, само око половине слике је видљиво на дну екрана. Међутим, већина корисника би више волела да види последњу слику у потпуности.

Померање са тачкама скроловања

Ово је мјесто гдје ћемо донијети ЦСС скрол бодова. Име је само по себи разумљиво; то је ЦСС стандард који нам омогућава ставите ставке на своје место приликом померања.

Постоје пет ЦСС својстава који чине овај стандард:

1. сцролл-снап-типе
2. сцролл-снап-поинтс-к
3. сцролл-снап-поинтс-и
4. сцролл-снап-координата
5. сцролл-снап-дестинатион

Подршка за претраживач

Тхе пропертиес потреба -вебкит и -Госпођа префикси за релевантне претраживаче. Од писања овог чланка, ЦСС сцролл снап није подржан у Цхромеу и Опера.

Имајте на уму да ће последња четири својства бити убачена од стране корисничких агената у блиској будућности. Уместо тога, нев пропертиес, Наиме сцролл-снап-алигн, сцролл-снап-маргина, и сцролл-снап-паддинг, може бити креирано, како је дефинисано у овој спецификацији.

Међутим, они ће имају сличну сврху као некадашња својства. Тренутно, некадашњи сет некретнина ће радити сасвим добро.

Пропертиес

Морате да Додајте сцролл-снап-типе у посуду за помицање (елемент контејнера чија су деца преплављена док се она помера). То одређује строгост хитне акције. Може да има три вредности:

1. обавезно - када се скроловање заврши, померање ће угриз на релевантну тачку ускочања
2. близина - мање строги од обавезно; ће зависи од процене УА да ли ће се елемент угасити на датој тачки за снимање
3. ниједан - нема пуцања

Тхе сцролл-снап-поинтс-к и сцролл-снап-поинтс-и својства припадају контејнеру за померање, такође. Они се односе на тачке на оси к и и где ће постојати тачке осетљивости. Њихова вредност је дати од стране понављање() функције. На пример, ако желите да додате тачке качења дуж к-осе у интервалу од 100пк морате користити сцролл-снап-поинтс-к: репеат (100пк) правило.

Тхе сцролл-снап-дестинатион Својство се такође додаје у контејнер за померање. То дефинише координату на контејнеру где лежи угриз. Управо на овом одредишном мјесту гдје ће дјеца спремника доћи на своје мјесто када се помичу.

Можете користити сцролл-снап-координата у вези са сцролл-снап-дестинатион. Морате га додати дјечјим елементима контејнера. То дефинира координате дјечјих елемената, који ће се ускладити са одредишним координатама њиховог скрол контејнера када корисник помери екран.

Обратите пажњу да не морате да користите сва својства одједном. Само сцролл-снап-типе обавезно. Уз то, можете дефинисати појединачне тачке причвршћивања или користити комбинацију одредишне координате.

Пример кода

Ево примера исјечка кода за а типични скрол контејнер, са померање у вертикалном смеру и неке слике унутра. Излази демо који можете наћи на почетку овог поста.

 див ширина: 300пк; хеигхт: 300пк; оверфлов: ауто;… див> имг ширина: 250пк; хеигхт: 150пк;… 

Сада ми додајте неколико тачака за снимање у контејнер за померање:

 див ширина: 300пк; оверфлов: ауто; сцролл-снап-поинтс-и: поновите (150пк); сцролл-снап-типе: обавезно;  

Испод можете видети како изгледа излаз Додате ЦСС снап тачке. Обратите пажњу када се померање заустави док је доња слика само делимично видљива, појављује се пуна слика након што сцроллпорт кликне на тачку ломљења изнад ње.