La propiedad de tipo Scroll Snap es una propiedad incorporada en el módulo Scroll Snap. Sin el módulo Scroll Snap, la galería de imágenes se verá ridícula. Antes del módulo Scroll Snap, este efecto se puede lograr con JavaScript, pero durante estos días se puede lograr Scroll Snap con CSS.
Esta propiedad es útil para detener el desplazamiento en algún punto específico de la página. Puede utilizar esta propiedad en la sección de galería de su página web. Le dará el control total del desplazamiento.
Sintaxis:
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]
Valores de propiedad: esta propiedad utiliza muchos valores, como se mencionó anteriormente y se describe a continuación:
- ninguno: esta propiedad deshabilita el ajuste de desplazamiento que ignorará los puntos de ajuste.
- x: esta propiedad habilita el ajuste de desplazamiento junto con el eje x que funciona en la posición de ajuste del eje horizontal.
- y: esta propiedad habilita el ajuste de desplazamiento junto con el eje y que funciona en la posición de ajuste del eje vertical.
- bloque: esta propiedad permite el ajuste de desplazamiento junto con el eje del bloque que funciona en la posición de ajuste del eje del bloque.
- en línea: esta propiedad permite el ajuste de desplazamiento junto con el eje en línea que funciona en la posición de ajuste del eje en línea.
- ambos: esta propiedad habilita el ajuste de desplazamiento con los dos ejes incluidos x, y, bloque y eje en línea.
- obligatorio: esta propiedad habilita un valor estricto específico que va a la posición de desplazamiento específica cuando no hay desplazamiento.
- proximidad: esta propiedad habilita un valor estricto específico que va a la posición de desplazamiento específica. Si la acción de desplazamiento se acerca bastante a una posición de ajuste, si no se cierra, actuará normalmente y no debería ajustarse en absoluto.
Ejemplo: El siguiente ejemplo ilustrará la propiedad de tipo Scroll Snap:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Scroll Snap Type
</title>
<style>
h1 {
color: green;
}
.container {
width: 500px;
height: 200px;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
overflow: scroll;
position: relative;
}
.element {
width: 480px;
height: 180px;
scroll-snap-align: start;
scroll-snap-stop: normal;
color: white;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.y-mandatory {
scroll-snap-type: y mandatory;
}
.element:nth-child(1) {
background:
url("https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png");
}
.element:nth-child(2) {
background:
url("https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png");
}
.element:nth-child(3) {
background:
url("https://www.geeksforgeeks.org/wp-content/uploads/javascript-768x256.png");
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>CSS Scroll Snap Type</h4>
<div class="container y-scroll y-mandatory">
<div class="wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con Scroll Snap Type se enumeran a continuación:
- Google cromo 69
- explorador de Internet 11
- firefox 68
- Safari 11
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA