Hay muchas formas de ocultar la barra de desplazamiento cuando la página está inactiva. Una de estas formas es usar los eventos onscroll, onmousewheel, onclick y onmousemove, que nos ayudan a lograr nuestro objetivo usando HTML básico y JavaScript.
Acercarse:
- El evento onscroll se usa para deshabilitar la barra de desplazamiento.
- El evento onscroll actúa tan pronto como se desplaza la página. Por lo tanto, el método setTimeout() se usa para proporcionar un retraso para ocultar la barra de desplazamiento, de modo que podamos desplazarnos hacia abajo primero.
- El tiempo se puede ajustar según nuestros requisitos.
- El evento onmousemove se usa para habilitar el desplazamiento tan pronto como se mueve el puntero del mouse. El evento onclick se usa para habilitar el desplazamiento tan pronto como el usuario hace clic. El evento onmousewheel se usa para habilitar el desplazamiento tan pronto como la página se desplaza hacia abajo. Por lo tanto, estos eventos nos ayudan a habilitar el desplazamiento cuando la página vuelve a estar activa.
Ejemplo 1: Tan pronto como el mouse se mueve, el mouse se desplaza o el usuario hace clic, se llama a la función enableScrolling() que nos permite desplazarnos hacia abajo. Cuando el usuario intenta desplazarse hacia abajo, se llama a la función disabledScrolling(), que hace que la barra de desplazamiento desaparezca después de 1000 ms. Este tiempo puede ser variado. Para volver a habilitar la barra de desplazamiento, mueva el puntero del mouse, haga clic o desplace el puntero del mouse para llamar a la función enableScrolling(). El estilo del texto se ha realizado utilizando la etiqueta ‘estilo’. El código HTML y JavaScript es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
How to hide scroll bar
for inactivity?
</title>
<style>
p {
font-size: 2rem;
}
</style>
</head>
<body onscroll="disableScrolling()"
onmousewheel="enableScrolling()"
onclick="enableScrolling()"
onmousemove="enableScrolling()">
<p>
Geeks for Geeks is a Computer Science
Portal created with the goal of
providing well written, well thought
and well-explained solutions for
selected questions. Geeks for Geeks
has covered everything, ranging from
algorithms and data structure courses
to competitive exam preparation courses.
Geeks for Geeks is in true sense a
a haven for geeks, where Tech lovers can
come together and share their knowledge.
</p>
<script>
// JavaScript code
function disableScrolling() {
setTimeout(function() {
document.body.style.overflow = 'hidden';
}, 1000);
}
function enableScrolling() {
document.body.style.overflow = '';
}
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo oculta la barra de desplazamiento en la imagen.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
How to hide scroll bar
for inactivity?
</title>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 150%;
}
</style>
</head>
<body onscroll="disableScrolling()"
onmousewheel="enableScrolling()"
onclick="enableScrolling()"
onmousemove="enableScrolling()">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20191024224332/Geeksforgeeks-Paid-Online-Courses.png" alt="GfG">
<script>
// JavaScript code
function disableScrolling() {
setTimeout(function() {
document.body.style.overflow = 'hidden';
}, 1000);
}
function enableScrolling() {
document.body.style.overflow = '';
}
</script>
</body>
</html>
Producción:
La principal desventaja de ocultar la barra de desplazamiento por inactividad es que tan pronto como la barra de desplazamiento se oculta, el contenido del cuerpo ‘salta’ para llenar el espacio que ocupaba la barra de desplazamiento. Por lo tanto, no parece muy atractivo para el usuario.