La propiedad scroll-margin-block-end se usa para establecer todos los márgenes de desplazamiento en el lado final de un elemento de desplazamiento a la vez.
Sintaxis:
scroll-margin-block-end: length /* Or */ scroll-margin-block-end: Global_Values
Valores de propiedad: Esta propiedad acepta dos propiedades mencionadas anteriormente y descritas a continuación:
- length : 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-end no acepta el valor porcentual como longitud.
Ejemplo: En este ejemplo, puede ver el efecto de scroll-margin-block-end desplazándose a un punto intermedio entre dos de las «interfaces» del contenido del ejemplo.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.interfaces {
width:278px;
height:296px;
scroll-snap-align: end none;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
color: white;
}
.doc {
width: 300px;
height:300px;
overflow-x: hidden;
overflow-y: auto;
white-space: nowrap;
scroll-snap-type:y mandatory;
}
</style>
</head>
<body>
<div class="doc">
<div class="interfaces" style=
"background-color: rgb(178, 248, 16);
scroll-margin-block-end: 90px;">
Geek 1
</div>
<div class="interfaces" style=
"color: black;
scroll-margin-block-end: 90px;">
Geek 2
</div>
<div class="interfaces" style=
"background-color: green;
scroll-margin-block-end: 90px;">
Geek 3
</div>
<div class="interfaces" style=
"color: green;
scroll-margin-block-end: 90px;">
Geek 4
</div>
<div class="interfaces" style=
"background-color: rgb(34, 177, 34);
scroll-margin-block-end: 90px;">
Geek 5
</div>
<div class="interfaces" style=
"background-color: rgb(108, 216, 162);
scroll-margin-block-end: 90px;">
Geek 6
</div>
</div>
</body>
</html>
Salida: este ejemplo muestra un área de ajuste de 90 px al desplazarse.
Navegadores compatibles:
- Cromo
- Ópera
- Borde
- Firefox
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