Esta propiedad especifica cómo se comportará el navegador cuando alcance el límite de dirección en línea de un área de desplazamiento.
Sintaxis:
overscroll-behavior-inline: auto|contain|none;
Valores de propiedad:
- auto: Es el valor por defecto, el comportamiento de overscroll es normal.
- contiene: aplica el comportamiento predeterminado al elemento respectivo, pero evita el enstringmiento de desplazamiento de los elementos subyacentes.
- ninguno: evita tanto el enstringmiento de desplazamiento como el comportamiento predeterminado de desplazamiento excesivo.
Se puede usar para evitar el desplazamiento excesivo en línea. Considere el siguiente escenario donde están presentes dos elementos a nivel de bloque, uno que contiene al otro. El bloque exterior y el bloque interior, ambos tienen volutas horizontales respectivas. De forma predeterminada, cuando nos desplazamos dentro del bloque interior y alcanzamos su límite, toda la página comenzará a desplazarse, lo que debe evitarse. Al usar la propiedad overscroll-behavior-inline en el bloque interno, podemos evitar esta situación.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>overscroll behavior inline</title>
<style>
#outerbox {
height: 300px;
width: 3000px;
}
#innerbox {
height: 300px;
width: 400px;
overflow: auto;
position: relative;
top: 50px;
left: 50px;
overscroll-behavior-inline: contain;
}
#content {
height: 100%;
width: 1500px;
background-color: green;
}
p {
padding: 10px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0;
width: 360px;
position: relative;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div id="outerbox">
<div id="innerbox">
<div id="content">
<p>
GEEKS FOR GEEKS<br>This green block has
overscroll-behavior-inline property,
inline overscrolling can be prevented here.
</p>
</div>
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Chrome 77.0 y superior
- Edge 79.0 y superior
- Firefox 73.0 y superior
- Ópera 64.0 y superior