La propiedad scroll-padding-right se usa para configurar todo el relleno a la derecha de un contenedor o elemento de desplazamiento a la vez. El valor especificado para scroll-padding-right determina qué parte de la página que está principalmente fuera del desplazamiento instantáneo debe permanecer visible.
Sintaxis:
scroll-padding-right: keyword_values
O
scroll-padding-right: length_values
O
scroll-padding-right: Global_Values
Valores de propiedad: Esta propiedad acepta tres propiedades mencionadas anteriormente y descritas a continuación.
- length_values: Esta propiedad hace referencia a los valores definidos con unidades de longitud exp: 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.
- Valores_globales: esta propiedad se refiere a los valores globales como heredar , inicial , unset , etc.
Ejemplo: El siguiente ejemplo ilustra la propiedad scroll-padding-right .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geek {
width: 300px;
height: 275px;
border: 2px solid black;
scroll-snap-align: none end;
}
.GeeksforGeeks {
width: 300px;
height: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
}
</style>
</head>
<body>
<div class="GeeksforGeeks" style=
"scroll-padding-right: 90px;">
<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">
<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">
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- cromo 69
- firefox 68
- Borde 79
- Ópera 56
- Safari 14.1
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