La propiedad scroll-margin-inline-start se usa para establecer todos los márgenes de desplazamiento al inicio de la dimensión en línea de un elemento de desplazamiento a la vez. La selección del lado de inicio depende del modo de escritura. El lado de inicio es el lado izquierdo para el modo de escritura horizontal-tb y el lado superior o inferior para el modo de escritura vertical-lr y vertical-rl respectivamente.
horizontal-tb significa horizontal de arriba a abajo , vertical-rl es la vertical de derecha a izquierda y vertical-lr es la vertical de izquierda a derecha .
Sintaxis:
scroll-margin-inline-start: length
o
scroll-margin-inline-start: Global_Values
Valores de propiedad: la propiedad scroll-margin-inline-start 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.
- Valores_globales: esta propiedad se refiere a los valores globales como heredar , inicial , unset , etc.
Nota: Scroll -margin-inline-start no acepta el valor porcentual como longitud.
Ejemplo: en este ejemplo, puede ver el efecto de scroll-margin-inline-start desplazándose hasta un punto intermedio entre las dos interfaces del contenido del ejemplo.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
width: 300px;
height: 300px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
scroll-snap-type: x mandatory;
}
.scroll>div {
flex: 0 0 300px;
border: 1px solid #000;
background-color: #57e714;
color: #fff;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
.scroll>div:nth-child(2n) {
background-color: #fff;
color: #0fe962;
}
.scroll>div:nth-child(2) {
scroll-margin-inline-start: 2rem;
}
.scroll>div:nth-child(3) {
scroll-margin-inline-start: 3rem;
}
</style>
</head>
<body>
<div class="scroll">
<div>Geek 1</div>
<div>Geek 2</div>
<div>Geek 3</div>
<div>Geek 4</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Firefox
- Cromo
- Borde
- Ópera
Nota: Internet Explorer y Safari no son compatibles.
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