La propiedad scroll-margin-block-start se utiliza para establecer todos los márgenes de desplazamiento en el lado de inicio de un elemento de desplazamiento a la vez. Esta propiedad
Sintaxis:
scroll-margin-block-start: length /* Or */ scroll-margin-block-start: Global_Values
Valores de propiedad: Esta propiedad 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-start no acepta el valor porcentual como longitud.
Ejemplo: En este ejemplo, puede ver el efecto de scroll-margin-block-start desplazándose a un punto intermedio entre dos de las «interfaces» del contenido del ejemplo.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.interfaces {
width:280px;
height:300px;
scroll-snap-align: start none;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
color: white;
}
.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="interfaces" style=
"background-color: rgb(117, 228, 27);
scroll-margin-block-start: 80px;">
Geeks 1
</div>
<div class="interfaces" style=
"background-color: green;
scroll-margin-block-start: 50px;">
for 2
</div>
<div class="interfaces" style=
"color: black;
scroll-margin-block-start: 100px;">
Geeks 3
</div>
<div class="interfaces"
style="background-color: rgb(60, 184, 126);
scroll-margin-block-start: 80px;">
for 4
</div>
<div class="interfaces" style=
"background-color: rgb(30, 253, 30);
scroll-margin-block-start: 80px;">
Geeks 5
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Firefox
- Cromo
- Ópera
- Borde
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