Mi intención es ocultar mi barra de desplazamiento (es decir, ocultarla DESLIZANDO HACIA LA DERECHA), después de desplazarme (digamos, como 2 o 3 segundos después de que termine de desplazarme)
Y para hacerlo visible nuevamente, tan pronto como comience a desplazarme (es decir, visible DESLIZANDO DESDE LA DERECHA)
VER FRASCO DE CÓDIGO:
div::-webkit-scrollbar { width: 8px; /* helps remove scrollbar which resizes or shifts list items */ /* display: none; */ } div::-webkit-scrollbar-track { background-color: #444444; } div::-webkit-scrollbar-button:vertical:increment { background-color: rgba(108, 92, 231, 0.65); } div::-webkit-scrollbar-button:vertical:decrement { background-color: rgba(108, 92, 231, 0.65); } div::-webkit-scrollbar-thumb { background-color: rgba(108, 92, 231, 0.7); border-radius: 10px; } div::-webkit-scrollbar-thumb:hover { background-color: rgba(108, 92, 231, 1); } div { width: 500px; height: 300px; background-color: #ececec; overflow: auto; } <div> <p style="height: 300vh;">Just some tall paragraph to force DIV scrollbars....</p> </div>Por favor, ayúdenme todos (¡LES ESTARÍA MUY AGRADECIDO!)
:D
Dado que CSS no tiene tiempos de espera y borrado de tiempos de espera, use JavaScript
Element.classList para agregar y eliminar una clasesetTimeout() establecido en 2500 ms, pero cada vez que se activa un evento de desplazamiento, elimine el tiempo de espera pendiente anterior usando clearTimeout . Lógicamente, después de que haya terminado de desplazarse, el último tiempo de espera que se configuró, después de 2,5 segundos, activará finalmente la eliminación de la clase..is-scrolling para definir los estilos de barra de desplazamiento deseados (que de lo contrario son transparentes de forma predeterminada) const showScrollbars = (evt) => { const el = evt.currentTarget; clearTimeout(el._scrolling); // Cancel pending class removal el.classList.add("is-scrolling"); // Add class el._scrolling = setTimeout(() => { // remove the scrolling class after 2500ms el.classList.remove("is-scrolling"); }, 2500); }; document.querySelectorAll("[data-scrollbars]").forEach(el => { el.addEventListener("scroll", showScrollbars); }); [data-scrollbars] { width: 500px; height: 180px; background-color: #ececec; overflow: auto; } [data-scrollbars]::-webkit-scrollbar { width: 8px; height: 8px; } [data-scrollbars]::-webkit-scrollbar-track { background-color: transparent; } [data-scrollbars]::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 10px; } [data-scrollbars].is-scrolling::-webkit-scrollbar-track { background-color: #777; } [data-scrollbars].is-scrolling::-webkit-scrollbar-thumb { background-color: gold; } <div data-scrollbars> <p style="height: 300vh;"> Just some tall paragraph to force DIV scrollbars...<br> Scroll me! (<<< PS: See the problem?!) </p> </div>No le recomendaría ocultar las barras de desplazamiento. Las barras de desplazamiento son una pista visual para el usuario de que en realidad hay contenido para desplazarse. Haz una prueba A/B simple. Para la mitad de sus visitantes, muestre la barra de desplazamiento. Para la otra mitad, haga esas cosas divertidas, y no se sorprenda de que su tasa mínima de clics para la parte inferior de la página de la aplicación (o elemento) tenga menos o ninguna interacción por parte de ese segundo grupo de usuarios. .
Estoy pensando en qué sucede si el usuario no tiene ninguna rueda del mouse para desplazarse y si el usuario se desplaza con la barra de desplazamiento que realmente usa. De todos modos, busque un ejemplo de barra de desplazamiento de desvanecimiento delgado en Google. Encontrará algunos ejemplos para el pergamino delgado, tal vez no sea invisible, pero es transparente y tiene una buena forma.