Превъртане-щракване-спиране - CSS-трикове

Anonim

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

scroll-snap-stopе незадължително свойство за елемент за превъртане в рамките на контейнер за превъртане. За повече информация относно контейнерите за scroll-snap-typeплъзгане при превъртане вижте записа в алманаха.

scroll-snap-stopви позволява да принудите контейнера за плъзгане да щракне към определен елемент. Да предположим, че превъртате в контейнер за щракане и сте му дали гигантско колело на въртене на мишката. Обикновено браузърът позволява на скоростта на вашето превъртане да премине през точките на прихващане, докато не се установи на точка на прилепване близо до мястото, където превъртането обикновено завършва. Чрез настройка scroll-snap-stopможете да кажете на браузъра, че той трябва да спре на определен елемент, преди да позволи на потребителя да го мине.

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-stop: always; )

Синтаксис

scroll-snap-stop: normal | always;

Стойности

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

  • normal е стойността по подразбиране и позволява даден елемент да се превърта през него, без да се щракне
  • always ще принуди браузъра да щракне към този елемент, дори ако превъртането обикновено минава покрай този елемент

Пример

Вижте примера за превъртане на бързо
писане от 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

Имайте предвид, че Chrome може да не поддържа scroll-snap-stop: always;в момента.

Свързани

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Ресурси

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