La propiedad scroll-margin-top se usa para establecer todos los márgenes de desplazamiento en la parte superior de un elemento a la vez. El valor especificado para scroll-margin-top determina qué parte de la página que está principalmente fuera del soporte debe permanecer visible.
Por lo tanto, los valores superiores del 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-top: length /* Or */ scroll-margin-top: 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, em, rem, vh, etc.
- Valores_globales: esta propiedad se refiere a los valores globales como inicial, heredado, no establecido, etc.
Nota: scroll-margin-top no acepta el valor porcentual como longitud.
Ejemplo: en este ejemplo, puede ver el efecto de scroll-margin-top desplazándose a un punto intermedio entre dos de las «interfaces» del contenido del ejemplo.
<!DOCTYPE html>
<html>
<head>
<style>
.page {
width:278px;
height:296px;
color: white;
font-size: 50px;
display: flex;
box-sizing: border-box;
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(20, 240, 38);
scroll-margin-top: 0px;">
Geeks
</div>
<div class="page" style=
"background-color: green;
scroll-margin-top: 20px;">
for
</div>
<div class="page"
style="color: black;
scroll-margin-top: 40px;">
Geeks
</div>
<div class="page"
style=
"background-color: rgb(10, 207, 43);
scroll-margin-top: 30px;">
for
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Firefox
- Ópera
- Borde
- Internet Explorer (no compatible)
- 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