La propiedad scroll-margin se utiliza para establecer todos los márgenes de desplazamiento de un elemento a la vez. El valor especificado para el margen de desplazamiento determina qué parte de la página que está principalmente fuera del soporte debe permanecer visible.
Por lo tanto, los valores de margen de desplazamiento representan los inicios que definen el área de ajuste de desplazamiento que se utiliza para ajustar este cuadro al soporte.
Sintaxis:
scroll-margin: length /* Or */ scroll-margin: Global_Values
Valores de la propiedad: Esta propiedad acepta las dos propiedades mencionadas anteriormente y descritas a continuación:
- longitud: Esta propiedad hace referencia a los valores definidos con unidades de longitud exp: px, em, vh, etc.
- Global_Values: esta propiedad se refiere a los valores globales como heredar, inicial, unset, etc.
Nota: el margen de desplazamiento no acepta el valor porcentual como longitud.
Ejemplo: en este ejemplo, puede ver el efecto del margen de desplazamiento desplazándose hasta un punto intermedio entre dos de las «interfaces» del contenido del ejemplo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
.scroll {
width: 350px;
height: 350px;
text-align: left;
box-sizing: border-box;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.scroll > div {
flex: 0 0 350px;
width: 350px;
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
/* Scroller will give 2rem margin
from left */
.scroll > div:nth-child(even) {
background-color: rgb(77, 238, 184);
color: #fff;
scroll-margin: 2rem;
}
/* Scroller will give 5rem margin
from left */
.scroll > div:nth-child(odd) {
background-color: #2dc06a;
color: #fff;
scroll-margin: 5rem;
}
</style>
</head>
<body>
<div class="scroll">
<div>Geeks</div>
<div>for</div>
<div>Geeks</div>
</div>
</body>
</html>
Salida: al desplazarse más allá de los elementos secundarios intermedios, el desplazamiento se ajustará a 2 rem fuera del borde izquierdo del div secundario par y 3 rem fuera del borde izquierdo del div secundario impar.
Navegadores compatibles:
- cromo 69
- firefox 90
- Borde 79
- Safari 14.1
- Ópera 56
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