La parte superior del relleno de desplazamiento es una propiedad incorporada en el módulo Scroll Snap. Esta propiedad establece la parte superior del relleno de desplazamiento a mano. Esta propiedad actúa como un imán en la parte superior del elemento deslizante que se adhiere a la parte superior de la ventana gráfica y detiene el desplazamiento (con fuerza) en ese lugar. La propiedad Scroll Padding es opcional, esta propiedad se usa cuando la propiedad Scroll Snap type se establece en none.
Sintaxis:
scroll-padding-top: [ length percentage | auto ]
Valores de la propiedad: Esta propiedad acepta dos propiedades mencionadas anteriormente y descritas a continuación:
- porcentaje de longitud: esta propiedad funciona igual que otras propiedades de relleno que contienen la longitud en cualquier unidad específica para el relleno.
- auto: esta propiedad deja algunos espacios para el relleno determinados por los navegadores.
Ejemplo: El siguiente ejemplo ilustra la propiedad superior Scroll Padding:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS Scroll Padding top
</title>
<style>
h1 {
color: green;
}
.element{
border:2px solid black;
}
.container {
width: 500px;
height: 200px;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
overflow: scroll;
position: relative;
}
.element {
width: 480px;
height: 180px;
scroll-snap-align: start;
scroll-snap-stop: normal;
color: white;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.y-mandatory {
scroll-snap-type: y mandatory;
/* scroll-padding: top right bottom left */
scroll-padding-top: 50px;
}
.element:nth-child(1) {
background:
url("https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png");
}
.element:nth-child(2) {
background:
url("https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png");
}
.element:nth-child(3) {
background:
url("https://www.geeksforgeeks.org/wp-content/uploads/javascript-768x256.png");
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>CSS Scroll Padding top</h4>
<div class="container y-scroll y-mandatory">
<div class="wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con CSS Scroll Padding top se enumeran a continuación:
- Google cromo 69
- Borde 79
- Ópera 56
- firefox 68
- Safari 14.1
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA