La propiedad scroll-padding-inline-start se utiliza para establecer todo el relleno de desplazamiento en el borde de inicio de un elemento o contenedor de desplazamiento en la dimensión en línea a la vez. 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 o vertical-rl respectivamente donde horizontal-tb representa las posiciones horizontales de arriba a abajo y vertical-rl o vertical-lr para vertical de derecha a izquierda y vertical de izquierda a derecha respectivamente.
Sintaxis:
scroll-padding-inline-start: keyword_values
O
scroll-padding-inline-start: length_values
O
scroll-padding-inline-start: Global_Values
Valores de propiedad: Esta propiedad acepta tres propiedades mencionadas anteriormente y descritas a continuación.
- valores_de_longitud: Esta propiedad hace referencia a los valores definidos con unidades de longitud. Ej: px, em, vh, %, etc.
- Global_Values: esta propiedad se refiere a los valores globales como heredar, inicial, unset, etc.
- valores_de_palabras clave: esta propiedad se refiere a los valores_de palabras clave definidos con unidades como auto . En general, esto se establecerá en 0px de forma predeterminada, pero puede ser un valor distinto de cero, así como si el valor distinto de cero es más apropiado.
Ejemplo: En este ejemplo, puede ver el efecto de scroll-padding-inline-start desplazándose a un punto intermedio entre las dos «interfaces» del contenido del ejemplo.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
width: 270px;
height: 300px;
scroll-snap-align: none start;
}
.GeeksforGeeks {
width: 300px;
height: 300px;
border: 2px solid green;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
}
</style>
</head>
<body>
<div class="GeeksforGeeks" style=
"scroll-padding-inline-start: 90px;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131449/img5.jpeg"
class="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img8.jpeg"
class="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img4-300x167.png"
class="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img8.jpeg"
class="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131449/img5.jpeg"
class="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img4-300x167.png"
class="geeks">
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Firefox
- Cromo
- Borde
- Ópera
- Safari (no compatible)
- Internet Explorer (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