scroll-behavior
La propiedad CSS
scroll-behavior
especifica el comportamiento del desplazamiento para un elemento con desplazamiento, cuando éste se produce debido a la navegación o a APIs CSSOM. Otros desplazamientos, p.ej. aquellos realizados por el usuario, no se ven afectados por esta propiedad. Cuando esta propiedad está especificada en el elemento raíz, se aplica al viewport.
Esta propiedad puede ser ignorada por los agentes de usuario.
/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;
/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;
Valor inicial | auto |
---|---|
Applies to | scrolling boxes |
Heredable | no |
Valor calculado | como se especifica |
Animation type | discrete |
Sintaxis
Valores
auto
- La caja de desplazamiento realiza el desplazamiento instantáneamente.
smooth
- La caja se desplaza suavemente, utilizando una función de tiempo definida por el agente de usuario (user-agent) sobre un período de tiempo también definido por éste. Los agentes de usuario seguirán las convenciones de su propia plataforma, en caso de que existan.
Sintaxis formal
auto | (en-US) smooth
Example
HTML
<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<scroll-container>
<scroll-page id="page-1">1</scroll-page>
<scroll-page id="page-2">2</scroll-page>
<scroll-page id="page-3">3</scroll-page>
</scroll-container>
CSS
a {
display: inline-block;
width: 50px;
text-decoration: none;
}
nav, scroll-container {
display: block;
margin: 0 auto;
text-align: center;
}
nav {
width: 339px;
padding: 5px;
border: 1px solid black;
}
scroll-container {
display: block;
width: 350px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
scroll-page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 5em;
}
Output
Especificaciones
Especificación | Estado | Comentarios |
---|---|---|
CSS Object Model (CSSOM) View Module La definición de 'scroll-behavior' en esta especificación. |
Working Draft | Initial specification |
Compatibilidad con navegadores
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help! (en-US)
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Soporte básico | 61[1] | 36 (36) | Sin soporte | (Yes)[1] | Sin soporte |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Soporte básico | Sin soporte | 36 (36) | Sin soporte | Sin soporte | Sin soporte |
[1] Soportado en Chrome and Opera activando las opciones"Smooth Scrolling" o "Enable experimental web platform features".