los scroll-snap-stopCSS La propiedad define si el contenedor de desplazamiento puede “pasar” por encima de posibles posiciones de ajuste.

/* Keyword values */scroll-snap-stop: normal;scroll-snap-stop: always;/* Global values */scroll-snap-type: inherit;scroll-snap-type: initial;scroll-snap-type: unset;

Sintaxis

Valores

normal
Cuando lo visual ventana gráfica del contenedor de desplazamiento de este elemento se desplaza, puede “pasar” por encima de posibles posiciones de ajuste.
always
El contenedor de desplazamiento no debe “pasar” por una posible posición de ajuste; y debe ajustar a la primera de las posiciones de ajuste de estos elementos.

Definicion formal

Valor inicial normal
Se aplica a todos los elementos
Heredado no
Valor calculado Como se especificó
Tipo de animación discreto

Sintaxis formal

normal | always

Ejemplos de

Ajustar en diferentes ejes

Este ejemplo está duplicado de scroll-snap-type con variaciones menores.

CSS

/* setup */:root, bodyheight: 100%;display: flex;align-items: center;justify-content: space-between;flex-flow: column nowrap;font-family: monospace;.containerdisplay: flex;overflow: auto;outline: 1px dashed lightgray;flex: none;.container.xwidth: 100%;height: 128px;flex-flow: row nowrap;.container.ywidth: 256px;height: 256px;flex-flow: column nowrap;/* definite scroll snap */.mandatory-scroll-snapping > divscroll-snap-stop: always;.proximity-scroll-snapping > divscroll-snap-stop: normal;/* scroll-snap */.x.mandatory-scroll-snappingscroll-snap-type: x mandatory;.y.mandatory-scroll-snappingscroll-snap-type: y mandatory;.x.proximity-scroll-snappingscroll-snap-type: x proximity;.y.proximity-scroll-snappingscroll-snap-type: y proximity;.container > divtext-align: center;scroll-snap-align: center;flex: none;.x.container > divline-height: 128px;font-size: 64px;width: 100%;height: 128px;.y.container > divline-height: 256px;font-size: 128px;width: 256px;height: 256px;/* appearance fixes */.y.container > div:first-childline-height: 1.3;font-size: 64px;/* coloration */.container > div:nth-child(even)background-color: #87EA87;.container > div:nth-child(odd)background-color: #87CCEA;

HTML

<divclass="container x mandatory-scroll-snapping"dir="ltr"><div>X Mand. LTR div><div>2div><div>3div><div>4div><div>5div>div><divclass="container x proximity-scroll-snapping"dir="ltr"><div>X Proximity LTRdiv><div>2div><div>3div><div>4div><div>5div>div><divclass="container y mandatory-scroll-snapping"dir="ltr"><div>Y Mand. LTRdiv><div>2div><div>3div><div>4div><div>5div>div><divclass="container y proximity-scroll-snapping"dir="ltr"><div>Y Prox. LTRdiv><div>2div><div>3div><div>4div><div>5div>div><divclass="container x mandatory-scroll-snapping"dir="rtl"><div>X Mandatory RTLdiv><div>2div><div>3div><div>4div><div>5div>div><divclass="container x proximity-scroll-snapping"dir="rtl"><div>X Proximity RTLdiv><div>2div><div>3div><div>4div><div>5div>div><divclass="container y mandatory-scroll-snapping"dir="rtl"><div>Y Mand. RTLdiv><div>2div><div>3div><div>4div><div>5div>div><divclass="container y proximity-scroll-snapping"dir="rtl"><div>Y Prox. RTLdiv><div>2div><div>3div><div>4div><div>5div>div>

Resultado

Especificaciones

Especificación Estado Comentario
Módulo CSS Scroll Snap Nivel 1
La definición de ‘scroll-snap-stop’ en esa especificación.		 Recomendación candidata Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
scroll-snap-stop 75 79 No No 62 No 75 75 No No No 11,0

Ver también