Cómo crear una barra de desplazamiento personalizada en un div (estilo de Facebook)

Question

Me pregunto cómo se ha hecho la barra de desplazamiento personalizada en Facebook.

¿Es solo CSS o algo de javascript también?

En caso afirmativo, ¿puedo darme una idea de cómo es el código?

Esta pregunta es específico de estilo de barra de desplazamiento de Facebook y no cómo tener simplemente una barra de desplazamiento a medida

Answer 1

This link debería empezar. 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).

Soy todo sobre la experiencia de aprendizaje, pero después de que haya aprendido cómo funciona, le recomiendo usar una biblioteca (de los cuales hay muchos) para hacerlo. Es una de esas cosas "no reinventar" ...

EDITAR Si desea omitir la fase de aprendizaje en conjunto, jassi9911 registró una link a un plugin de jQuery que está muerto-fácil de usar. Buen material.

Answer 2

es una combinación de ambos javascript y css

http://jscrollpane.kelvinluck.com/basic.html

Answer 3

Si usted está buscando un Facebook como barra de desplazamiento, entonces se lo recomiendo encarecidamente que tome un vistazo a éste:

http://rocha.la/jQuery-slimScroll

Answer 4

He resuelto este problema mediante la adición de otro div como un hermano al contenido de desplazamiento div. 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> 

destacados importantes CSS:

• Su CSS definiría la región de contenido con una altura y rebosadero para permitir que la barra de desplazamiento (s) a aparecer.
• La clase de ventana consigue las mismas esquinas diámetro que el título y el pie
• La gota de sombra, si se desea, sólo se da a la clase de ventana
• La altura de la div pie de página es el mismo que el radio de la esquinas inferiores

Esto es lo que parece:

Answer 5

Facebook utiliza una técnica muy inteligente que he descrito en el contexto de mi complemento scrollbar jsFancyScroll:

El contenido desplazado se desplaza de forma nativa por los mecanismos de desplazamiento del navegador mientras la barra de desplazamiento nativa se oculta utilizando definiciones de desbordamiento y la barra de desplazamiento personalizada se sincroniza mediante la escucha de eventos bidireccionales.

No dude en utilizar mi plug-in para su proyecto: :)

https://github.com/leoselig/jsFancyScroll/

lo recomiendo sobre complementos tales como TinyScrollbar que vienen con problemas de rendimiento terribles!