La propiedad scroll-padding-left se usa para configurar todo el relleno a la izquierda de un contenedor o elemento de desplazamiento a la vez. El valor especificado para scroll-padding-left determina qué parte de la página que está principalmente fuera del ordenamiento instantáneo debe permanecer visible.
Sintaxis:
scroll-padding-left:length_values
O
scroll-padding-left:keyword_values
O
scroll-padding-left: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.
- 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 también puede ser un valor distinto de cero, si el valor distinto de cero es más apropiado.
- Global_Values: esta propiedad se refiere a los valores globales como heredar, inicial, unset, etc.
Ejemplo: El siguiente ejemplo ilustra la propiedad scroll-padding-left .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geek {
width: 275px;
height: 300px;
border: 2px solid red;
scroll-snap-align: none start;
}
.GeeksforGeeks {
width: 300px;
height: 300px;
border: 2px solid green;
text-align: center;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
}
</style>
</head>
<body>
<div class="GeeksforGeeks" style=
"scroll-padding-left: 80px;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131449/img5.jpeg"
class="geek">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png"
class="geek">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img4-300x167.png"
class="geek">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png"
class="geek">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200723131449/img5.jpeg"
class="geek">
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Firefox
- Ópera
- Borde
- Safari (compatible parcialmente)
- 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