La propiedad scroll-margin-block se usa para establecer todos los márgenes de desplazamiento al principio y al final de un elemento de desplazamiento a la vez. Esta propiedad es una abreviatura de la propiedad scroll-margin-block-start y scroll-margin-block-end .
La selección de los lados inicial y final depende del modo de escritura. El lado inicial y el lado final son los lados superior e inferior respectivamente para el modo de escritura horizontal-tb.
- Donde horizontal-tb significa horizontal de arriba a abajo.
El lado inicial y el lado final son los lados izquierdo y derecho respectivamente para el modo de escritura vertical-rl o vertical-lr.
- Donde vertical-rl es la vertical de derecha a izquierda y vertical-lr es la vertical de izquierda a derecha.
Sintaxis:
scroll-margin-block: length /* Or */ scroll-margin-block: Global_Values
Valores de propiedad: la propiedad scroll-margin-block acepta dos propiedades mencionadas anteriormente y descritas a continuación:
- longitud: Esta propiedad se refiere a los valores definidos con unidades de longitud como em, px, rem, vh, etc.
- Global_Values: esta propiedad se refiere a los valores globales como heredar, inicial, unset, etc.
Nota: scroll-margin-block no acepta el valor porcentual como longitud.
Ejemplo: en este ejemplo, puede ver el efecto del bloque de margen de desplazamiento desplazándose hasta un punto intermedio entre dos de las «interfaces» del contenido del ejemplo.
<!DOCTYPE html>
<html>
<head>
<style>
.page {
width: 278px;
height: 296px;
box-sizing: border-box;
color: white;
font-size: 60px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: end none;
}
.Container {
width: 300px;
height: 300px;
overflow-x: hidden;
overflow-y: auto;
white-space: nowrap;
scroll-snap-type: y mandatory;
}
</style>
</head>
<body>
<div class="Container">
<div class="page"
style="background-color: rgb(95, 236, 14);
scroll-margin-block: 90px;">
Geeks
</div>
<div class="page"
style="background-color: rgb(25, 143, 25);
scroll-margin-block: 90px;">
for
</div>
<div class="page"
style="background-color: rgb(110, 228, 129);
scroll-margin-block: 90px;">
Geeks
</div>
<div class="page"
style="color: black;
scroll-margin-block: 90px;">
for
</div>
<div class="page"
style="background-color: rgb(25, 143, 25);
scroll-margin-block: 90px;">
Geeks
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Firefox
- Safari (no compatible)
- Borde
- Internet Explorer (no compatible)
- Ópera
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