javascript - examples - ocultar la barra de desplazamiento y mostrar al pasar el ratón como la nueva barra lateral de chat de Facebook
scrollbar floating css (5)
Facebook acaba de actualizar el chat (una vez más) y ahora una nueva barra lateral fija queda a la izquierda de la pantalla. cuando su contenido se desborda, aparece una barra de desplazamiento, pero solo si se desplaza con la rueda del mouse o si el mouse se mueve sobre (o cerca) de la barra de desplazamiento. Se desvanece si el mouse no está sobre él. es muy útil para objetos con ventana de cosas (como el chat en sí). ¿Entonces, cómo funciona?
PD: estoy buscando una solución html5 / css / javascript pura (sin jquery o similar), no es necesario tener compatibilidad con el navegador, debería funcionar en la última versión de Chrome y nada más, ya que solo estoy haciendo una aplicación para Chrome.
Aquí hay una actualización de la publicación de Stephen P. para tener una barra de desplazamiento con estilo.
http://jsfiddle.net/PVZB8/139/
-Micro
Esta podría no ser la respuesta exacta a la pregunta, porque se le pide una solución sin jQuery. Pero vine aquí a través de un motor de búsqueda y estoy usando jQuery. Si desea una solución que se sienta tan suave como se ve exactamente en Facebook , eche un vistazo a esto:
Me gustaría revivir este hilo para el beneficio de futuros visitantes y resumir las otras respuestas a este hilo. Prefiero jsFancyScroll (¡gracias Leo Selig !) Así como nanoScrollerJS (¡gracias ip !) Porque ambos "retienen la experiencia de desplazamiento natural proporcionada por el SO". Intente buscar una selección de texto y luego busque la ubicación de la barra de desplazamiento en las distintas implementaciones para ver a qué me refiero.
Si no le importa diseñar la barra de desplazamiento y solo quiere que se oculte automáticamente, la respuesta de Stephen P parece ser la más elegante y la más compatible.
También es posible que desee comprobar nano scroller .
Establece el desbordamiento en none normalmente y lo cambia para tener overflow-y: scroll al overflow-y: scroll .