La propiedad Scroll Padding es una propiedad incorporada en el módulo Scroll Snap. Esta propiedad establece las manos largas del relleno de desplazamiento. 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: [ 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 Scroll Padding:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Scroll Padding
</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: 50px 0px 0px 20px;
}
.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</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 se enumeran a continuación:
- Google cromo 69
- explorador de Internet 11
- firefox 68
- Safari 11
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA