Estoy tratando de ocultar la barra de desplazamiento y luego mostrarla nuevamente después de que el visitante intente desplazarse. HTML y JS

<body onscroll="scrollable()" style="overflow: hidden;">
    ...
    <script>
    function scrollable() {
        document.body.style.overflow = "auto";
        /* If this makes any sense... */
    }
    </script>
</body>

Fragmento

function scrollable() {
  document.body.style.overflow = "auto";
}
.enablescrolling {
  height: 10000px;
  background-color: red;
  width: 100%;
}
<body onscroll="scrollable()" style="overflow: hidden;">
  ...
  <br>I didn't saw any errors in the console
  <div class="enablescrolling"></div>

2
Zefir Zdravkov 22 feb. 2017 a las 20:39

2 respuestas

La mejor respuesta

Gran respuesta de Scott Marcus.

Otra opción sería ocultar la barra de desplazamiento con una pseudo clase ::-webkit-scrollbar y luego eliminar esa clase en el desplazamiento.

function showScrollbar() {
  document.body.className = "";
}
.enablescrolling {
  height: 10000px;
  background-color: red;
  width: 100%;
}

.hideScrollbar::-webkit-scrollbar {
  display: none;
}
<body onscroll="showScrollbar()" class="hideScrollbar">
  ...
  <br>I didn't saw any errors in the console
  <div class="enablescrolling"></div>
</body>
1
Deividas Karzinauskas 22 feb. 2017 a las 17:56

Cuando el desbordamiento está oculto, no puede desplazarse y si no puede desplazarse, no se activa ningún evento de desplazamiento y es por eso que no se invoca su función.

Sin embargo, puede escuchar otros eventos, como el {{X0 }} evento que se dispara cuando se gira la rueda del mouse.

document.addEventListener("wheel", scrollable);

function scrollable(evt) {
  document.body.style.overflow = "auto";
}
.enablescrolling {
  height: 10000px;
  background-color: red;
  width: 100%;
}
<body style="overflow: hidden;">
  ...
  <br>I didn't saw any errors in the console
  <div class="enablescrolling"></div>
2
Scott Marcus 22 feb. 2017 a las 17:49