Scroll-snap-type - CSS-трикове

Anonim

В scroll-snap-typeИмотът е част от СГО Превъртете Snap модул. Скролирането при превъртане се отнася до „заключване“ на позицията на прозореца за преглед към конкретни елементи на страницата, докато прозорецът (или превъртащият се контейнер) се превърта. Помислете за това като за поставяне на магнит върху елемент, който се придържа към горната част на прозореца и принуждава страницата да спре да превърта точно там.

Това е полезно, ако искате да спрете браузъра в определени точки на страницата. Например: Потребител, разглеждащ фотогалерия, вероятно не иска да превърта половината от изображението - вероятно би предпочел изображението да „щракне“ в правилната позиция, докато превърта. Скролирането при превъртане дава на разработчиците чист CSS начин да се справят с това поведение.

scroll-snap-typeе задължително свойство на всеки скролиращ контейнер, към който искате да добавите щракване на превъртане. Той отговаря на три въпроса за контейнер за превъртане:

  1. Контейнерът използва ли скролиране?
  2. На коя ос - x (хоризонтална), y (вертикална), блок или вградена - трябва да се приложи скролиране?
  3. Как трябва да се държи щракането при превъртане? Принуден ли е 100% от времето, или влиза в сила само когато потребителят се приближи „достатъчно близо“ до моментна позиция? Повече за това по-късно.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Синтаксис

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Стойности

scroll-snap-type приема следните стойности:

  • none деактивира щракването при превъртане
  • x позволява превключване на превъртане само по оста x.
  • y дава възможност за щракване при превъртане само по оста y.
  • block дава възможност за щракване при превъртане само по оста на блока.
  • inline дава възможност за щракване при превъртане само по вградената ос.
  • bothпозволява щракане на превъртане по двете оси (което можете да помислите като xи y, или inlineи block.
  • mandatory е стойност на строгост, която казва на браузъра винаги да преминава в моментна позиция, когато няма превъртане.
  • proximityе стойност на строгост, която казва на браузъра да премине към моментна позиция, ако скролиращото действие се приближи доста до моментна позиция. Ако не е доста близо, браузърът не трябва да щрака и превъртането ще се държи нормално.

Пример

Вижте примера за превъртане на тип писалка
от CSS-трикове (@ css-трикове) на CodePen.

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

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

работен плот

Chrome Firefox IE Ръб, край Сафари
69 68 11 * 79 11.

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

Android Chrome Android Firefox Android iOS Safari
88 85 81 11,0-11,2

Свързани

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ресурси

  • Препоръка за кандидатстване за W3C при превъртане на CSS
  • Практично прихващане на CSS превъртане
  • Представяме ви CSS Scroll Snap Points