Propiedad CSS scrollbar
El conjunto de pseudo-elementos CSS ::-webkit-scrollbar es un gancho de estilo propietario que permite a los diseñadores crear temas personalizados para las barras de desplazamiento nativas del navegador.
INFO
Estos pseudo-elementos se exponen detrás del prefijo de proveedor -webkit y son compatibles principalmente con los navegadores basados en Chromium. No son compatibles con Firefox ni Safari. Para una mayor compatibilidad con los navegadores, considere usar las propiedades estándar scrollbar-width y scrollbar-color.
Los pseudo-elementos ::-webkit-scrollbar constan de siete partes diferentes que, en conjunto, componen un elemento completo de la interfaz de usuario de la barra de desplazamiento. Estos siete pseudo-elementos son los siguientes:
::-webkit-scrollbar::-webkit-scrollbar-button::-webkit-scrollbar-track::-webkit-scrollbar-track-piece::-webkit-scrollbar-thumb::-webkit-scrollbar-corner::-webkit-scrollbar-resizer
Sintaxis
Para dar estilo a las barras de desplazamiento, aplica reglas CSS directamente a los pseudo-elementos ::-webkit-scrollbar en el contenedor con desplazamiento. Puedes apuntar a cualquier elemento con overflow establecido en scroll o auto, no solo al body.
css
.scrolling-element::-webkit-scrollbar {
/* scrollbar styles */
}
.scrolling-element::-webkit-scrollbar-thumb {
/* thumb styles */
}Ejemplo de los pseudo-elementos de la barra de desplazamiento:
Ejemplo de código CSS de scrollbar
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
background: #eee;
overflow: scroll;
width: 85%;
max-width: 600px;
margin: 0 auto;
padding: 3em;
font: 100%/1.4 Georgia, serif;
border: 1px solid #666;
}
p {
margin: 0 0 1.5em;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: #666;
outline: 1px solid #eee;
}
</style>
</head>
<body>
<h2>Scrollbar property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</body>
</html>Ejemplo de los pseudo-elementos de la barra de desplazamiento con ::-webkit-scrollbar-track y ::-webkit-scrollbar-thumb:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
background: #ececec;
overflow: scroll;
width: 90%;
max-width: 550px;
margin: 0 auto;
padding: 2em;
border: 2px solid #cccccc;
}
p {
margin: 0 0 1.5em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
body::-webkit-scrollbar {
width: 5px;
background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #666666;
}
</style>
</head>
<body>
<h2>Scrollbar property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</body>
</html>Pseudo-elementos
| Pseudo-element | Description |
|---|---|
::-webkit-scrollbar | La propia barra de desplazamiento. |
::-webkit-scrollbar-button | Los botones de la barra de desplazamiento. |
::-webkit-scrollbar-track | La pista de la barra de desplazamiento. |
::-webkit-scrollbar-track-piece | La parte de la pista que no está cubierta por el control deslizante. |
::-webkit-scrollbar-thumb | El control deslizante de desplazamiento arrastrable. |
::-webkit-scrollbar-corner | La esquina inferior de la barra de desplazamiento, donde se encuentran las barras de desplazamiento horizontal y vertical. |
::-webkit-scrollbar-resizer | El control deslizante de redimensionamiento arrastrable que aparece en la esquina inferior de algunos elementos. |
Práctica
¿Qué propiedades de CSS se utilizan para cambiar la apariencia de las barras de desplazamiento?