La propiedad scroll-snap-align de CSS representa la posición de ajuste del área de ajuste de un cuadro dentro del puerto de ajuste del elemento o contenedor.
Sintaxis:
scroll-snap-align: Keyword_Values; /* Or */ scroll-snap-align: Global_Values;
Valores de propiedad: la propiedad scroll-snap-align acepta dos valores mencionados anteriormente y descritos a continuación:
- keyword_Values: esta propiedad se refiere a los valores de palabras clave como none, start, end, center, etc.
- Global_Values: esta propiedad se refiere a los valores globales como heredar, inicial, unset, etc.
Nota: Cuando se establecen dos valores de propiedad, el primero es para bloque y el segundo es para en línea. Ex. scroll-snap-align: inicio final;
Ejemplo 1: En este ejemplo, puede ver el efecto de desplazar-ajustar-alinear desplazándose a un punto intermedio entre dos de las «interfaces» del contenido del ejemplo. Aquí hemos utilizado none start como valor de propiedad.
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
width: 255px;
height: 300px;
border:4px solid greenyellow;
scroll-snap-align: none start;
}
.Container {
width: 300px;
height: 300px;
border:5px solid red;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
scroll-snap-stop: always;
}
</style>
</head>
<body>
<div class="Container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png"
class="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131449/img5.jpeg"
class="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img4-300x167.png"
class="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png"
class="geeks">
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo.
- Firefox.
- Safari.
- Borde.
- Ópera.
- Internet Explorer (no compatible).
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA