javascript - estilos - Cómo crear una barra de desplazamiento personalizada en un div(estilo de Facebook)
scrollbar css generator (5)
Facebook usa una técnica muy inteligente que describí en el contexto de mi plugin de barra de desplazamiento jsFancyScroll:
El contenido desplazado en realidad se desplaza de forma nativa por los mecanismos de desplazamiento del navegador mientras que la barra de desplazamiento nativa se oculta mediante el uso de definiciones de desbordamiento y la barra de desplazamiento personalizada se mantiene sincronizada mediante la audición de eventos bidireccionales.
Siéntase libre de usar mi complemento para su proyecto: :)
https://github.com/leoselig/jsFancyScroll/
¡Lo recomiendo sobre complementos como TinyScrollbar que vienen con terribles problemas de rendimiento!
Me pregunto cómo se ha hecho la barra de desplazamiento personalizada en Facebook.
¿Es solo CSS o algún javascript también?
Si es así, ¿puedo tener una idea de cómo se ve el código?
Esta pregunta es específica del estilo de barra de desplazamiento de Facebook y no de cómo simplemente tener una barra de desplazamiento personalizada
Resolví este problema agregando otro div como un hermano a la div de contenido de desplazamiento. Su altura se establece en el radio de los bordes curvos. Habrá problemas de diseño si tiene contenido que desea desplazar hacia la parte inferior, o el texto que desea incluir en este nuevo div, etc. pero para mi interfaz de usuario, este div delgado no es problema.
El verdadero truco es tener la siguiente estructura:
<div class="window">
<div class="title">Some title text</div>
<div class="content">Main content area</div>
<div class="footer"></div>
</div>
Puntos importantes de CSS:
- Su CSS definiría la región de contenido con una altura y un desbordamiento para permitir que aparezcan las barras de desplazamiento.
- La clase de ventana obtiene las mismas esquinas de diámetro que el título y el pie de página
- La sombra paralela, si se desea, solo se otorga a la clase ventana
- La altura de la div del pie de página es la misma que el radio de las esquinas inferiores
Esto es lo que parece:
Si estás buscando una barra de desplazamiento como Facebook, te recomiendo que le eches un vistazo a esta:
es una combinación de javascript y css
Este enlace debería ayudarte a comenzar. Para resumir, un div que ha sido diseñado para parecerse a una barra de desplazamiento se usa para atrapar eventos de hacer clic y arrastrar. Alámbricos a estos eventos son métodos que desplazan el contenido de otro div que se establece a una altura arbitraria y, por lo general, tiene una regla de desbordamiento de css: scroll (hay variantes en las reglas de css pero se entiende la idea).
Me refiero a la experiencia de aprendizaje, pero después de que hayas aprendido cómo funciona, te recomiendo usar una biblioteca (de las cuales hay muchas) para hacerlo. Es una de esas cosas de "no reinventar" ...
EDITAR Si desea omitir por completo la fase de aprendizaje, jassi9911 publicó un link a un complemento jQuery que es muy fácil de usar. Buen material.