La propiedad scroll-margin-bottom se usa para establecer todos los márgenes de desplazamiento en la parte inferior de un elemento a la vez. El valor especificado para scroll-margin-bottom determina qué parte de la página que está principalmente fuera del soporte debe permanecer visible.
Por lo tanto, los valores inferiores del margen de desplazamiento representan los inicios que definen el área de ajuste de desplazamiento que se utiliza para ajustar este cuadro al puerto de ajuste.
Sintaxis:
scroll-margin-bottom: length /* Or */ scroll-margin-bottom: 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: px, rem, em, vh, etc.
- Valores_globales: esta propiedad se refiere a los valores globales como inicial, heredado, no establecido, etc.
Nota: scroll-margin-bottom no acepta el valor porcentual como longitud.
Ejemplo: En este ejemplo, puede ver el efecto de scroll-margin-bottom desplazándose a un punto intermedio entre dos de las «interfaces» del contenido del ejemplo.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.scroller {
width: 300px;
height:300px;
overflow-x: hidden;
overflow-y: auto;
scroll-snap-type:y mandatory;
}
.scroller > div {
width: 300px;
height: 300px;
font-size: 50px;
color: white;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: end none;
}
.scroller div:nth-child(odd){
background-color: green;
scroll-margin-bottom: 1rem;
}
.scroller div:nth-child(even){
background-color: rgb(160, 231, 45);
scroll-margin-bottom: 3rem;
}
</style>
</head>
<body>
<div class="scroller">
<div>Geeks</div>
<div>for</div>
<div>Geeks</div>
<div>for</div>
<div>Geeks</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Firefox
- Borde
- Ópera
- Safari (compatible parcialmente)
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