La propiedad scroll-margin-inline se usa para establecer todos los márgenes de desplazamiento al principio y al final de un elemento de desplazamiento a la vez. Esta propiedad es una abreviatura de la propiedad scroll-margin-inline-start y scroll-margin-inline-end . La selección de los lados inicial y final depende del modo de escritura. El lado inicial y el lado final son los lados izquierdo y derecho respectivamente para el modo de escritura horizontal-tb .
- Donde horizontal-tb significa horizontal de arriba a abajo .
De manera similar, el lado inicial y el lado final son los lados superior e inferior respectivamente para el modo de escritura vertical-rl o vertical-lr .
- Donde vertical-rl es la vertical de derecha a izquierda y vertical-lr es la vertical de izquierda a derecha .
Sintaxis:
scroll-margin-inline: length
O
scroll-margin-inline: Global_Values
Valores de propiedad: la propiedad scroll-margin-inline 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-inline no acepta valores porcentuales como longitud.
Ejemplo: en este ejemplo, puede ver el efecto de scroll-margin-inline desplazándose a un punto intermedio entre dos de las 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: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: end;
}
.scroll>div:nth-child(2n) {
background-color: #fff;
color: #0fe962;
}
.scroll>div:nth-child(2) {
scroll-margin-inline: 2rem;
}
.scroll>div:nth-child(3) {
scroll-margin-inline: 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
- Chrome (no compatible)
- Borde (no compatible)
- Safari (no compatible)
- Internet Explorer (no compatible)
- Ópera (no compatible)
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