Въведение в CSS Scroll Snap Points

Най- CSS Scroll Snap модул е уеб стандарт, който ни дава известен контрол прелистване на уеб страница така че да можем да накараме потребителите да се придвижват до определени части от страницата, а не до някъде другаде.

Превъртане е едно от най-изпълнените действия на даден уебсайт. През годините браузърите имат подобриха своите характеристики за превъртане да съответства на гъвкавата сила на пръстите на потребителите. И разработчиците имат използва се превъртане творчески за постигане на по-добро или изненадващо потребителско изживяване.

Въпреки това, когато става въпрос за връзката между кодиране и превъртане, само JavaScript изглежда имаше някакъв контрол върху последния. Това беше така за дълъг период от време, но с въвеждане на точки за прелистване, CSS започна да навакса.

Превъртане без точки за прелистване

Обикновено не прелистваме много бавно, особено на телефони. Колкото по-бързо превъртате, толкова по-малко контрол имате където на екрана ще свършиш когато сте спрели да превъртате.

Представете си, че преглеждате масив от изображение на продукт на уебсайт или галерия от снимки или онлайн слайдове. Това, което предпочитате в такива приложения, е да вижте целия продукт, снимка или слайд всеки път, когато превъртате. Не само част на изображението, снимката или слайда на продукта.

Например, на демонстрацията по-долу можете да видите, когато потребителят спре само с превъртане около половината от изображението се вижда в долната част на екрана. Повечето потребители обаче предпочитат да видят последното изображение напълно.

Превъртане с точките за превъртане

Това е мястото, където въвеждаме CSS превъртате точките за прихващане. Името е очевидно; това е CSS стандарт, който ни позволява щракнете на място при превъртане.

Има пет CSS свойства които съставляват този стандарт:

1. превъртете-модула тип
2. превъртане конзолни точки-х
3. превъртете-модула точки-у
4. превъртете-модула координира
5. превъртете-модула дестинация

Поддръжка на браузър

Имотите трябва -WebKit и -Госпожица представки за съответните браузъри. От написването на тази статия CSS scroll snap не се поддържа в Chrome и Opera.

Имайте предвид, че последните четири свойства вероятно ще бъдат премахнати от потребителските агенти в близко бъдеще. Вместо, нови имоти, а именно превъртете-щракне подравняване, превъртете-модула марж, и превъртете-модула уплътнение, може да се създаде, както е определено в настоящата спецификация.

Те обаче ще го направят имат подобна цел като предишни имоти. В момента бившият набор от имоти ще работи добре.

Имоти

Ти трябва да добавете превъртете-модула тип собственост към контейнера за превъртане (елементът на контейнера, чиито деца са препълнени, докато се превърта). Той указва строгост на бързото действие. Тя може да отнеме три стойности:

1. задължителен - когато превъртането приключи, ще се превърта щракнете в съответната точка на щракване
2. близост - по-малко строги от задължителен; ще го направи зависи от преценката на. \ t UA дали елементът ще щракне в дадена точка на прихващане
3. нито един - няма счупване

Най- превъртане конзолни точки-х и превъртете-модула точки-у Имоти принадлежат на контейнера за превъртане, също. Те се отнасят до точките на осите x и y, където ще съществуват точките на прилепване. Тяхната стойност е дадени от Повтарям () функция. Например, ако искате да добавите моментни точки по оста х в интервала от 100px трябва да използвате scroll-snap-points-x: repeat (100px) правило.

Най- превъртете-модула дестинация също се добавя към контейнера за превъртане. То определя координата на контейнера където лежи крайна дестинация. Именно в тази кратковременна дестинация децата на контейнера ще се прихванат на място, когато се превъртат.

Можете да използвате превъртете-модула координира собственост във връзка с превъртете-модула дестинация. Трябва да го добавите към детските елементи на контейнера. То определя координатите на детските елементи, който ще се приведе в съответствие с координатите на дестинацията на контейнера за превъртане, когато потребителят превърта екрана.

Забележете, че не трябва да използвате всички свойства наведнъж. само превъртете-модула тип е задължително. Наред с това можете да дефинирате отделни точки на прилепване или да използвате комбинацията дестинация-координат.

Пример за код

Ето примерен кодов фрагмент за a типичен контейнер за превъртане, с превъртане във вертикална посока и някои изображения вътре. Извежда демото, което можете да намерите в началото на този пост.

 div ширина: 300px; височина: 300px; overflow: auto;… div> img width: 250px; височина: 150px;… 

Сега ние добавете някои точки за прилепване към контейнера за превъртане:

 div ширина: 300px; препълване: автоматично; scroll-snap-points-y: повторение (150px); scroll-snap-type: задължителен;  

По-долу можете да видите как изглежда изходът с Добавени са точките на CSS. Забележете, когато скролирането спре, докато дъното е само частично видимо, на Появява се пълно изображение след като scrollport щракне в точката на сгъване над нея.