Comment créer une barre de défilement personnalisée sur un div

Question

Je me demande comment la barre de défilement personnalisée sur Facebook a été créée.

Est-ce uniquement du CSS ou du Javascript?

Si oui, puis-je avoir une idée de l'apparence du code?

Answer 1

Ce lien devrait vous obtenir a commencé. Longue histoire courte, un custom css div est utilisé en conjonction avec le JavaScript pour attraper un cliquer-glisser sur les événements de la coutume div. Filaire jusqu'à ces événements sont autant de méthodes que de faire défiler le contenu de ce div personnalisé-scroller a été attaché à.

Je suis tout au sujet de l'expérience d'apprentissage -- mais après vous avez appris comment il fonctionne, je recommande d'utiliser une bibliothèque (qui sont nombreuses) de le faire. C'est l'un de ceux qui "ne cherche pas à réinventer" les choses...

MODIFIER Si vous souhaitez ignorer la phase d'apprentissage tout à fait, jassi9911 posté un lien vers un plugin jQuery qui est très simple à utiliser. De bonnes choses.

Answer 2

Facebook utilise un très habile technique que j'ai décrite dans le contexte de ma barre de défilement plugin jsFancyScroll:

Le défilé de contenu est en fait défiler nativement par le navigateur de défilement des mécanismes tandis que le natif de la barre de défilement est caché par l'aide de dépassement de définitions et de la coutume de la barre de défilement est synchronisé par bi-directionnel de l'événement à l'écoute.

N'hésitez pas à utiliser mon plugin pour votre projet: :)

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

Je le recommande fortement au cours des plugins tels que TinyScrollbar qui viennent avec de terribles problèmes de performances!

Answer 3

c'est une combinaison de javascript et css

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

La démo en direct est arrivée

http://demo.takien.com/index.php?page=scrollable_area

Answer 4

Si vous recherchez une barre de défilement comme Facebook, je vous recommande fortement de jeter un œil à celle-ci:

http://rocha.la/jQuery-slimScroll

Answer 5

J'ai résolu ce problème en ajoutant une autre div en tant que frère du défilement du contenu de la div. C'est la hauteur est définie par le rayon de la courbe des frontières. Il y aura des problèmes de conception si vous avez du contenu que vous souhaitez poussé vers le bas, ou le texte que vous voulez de flux dans cette nouvelle div, etc,. mais pour mon UI ce mince div n'est pas un problème.

Le vrai truc c'est d'avoir la structure suivante:

<div class="window">
 <div class="title">Some title text</div>
 <div class="content">Main content area</div>
 <div class="footer"></div>
</div>

Important CSS faits saillants:

• Votre CSS serait de définir le contenu de la région, avec une hauteur de dépassement et pour permettre à la barre de défilement(s) apparaisse.
• La fenêtre de la classe obtient le même diamètre angles, ainsi que le titre et pied de page
• L'ombre portée, si désiré, c'est uniquement pour la classe de fenêtre
• La hauteur du pied de page div est le même que le rayon des coins inférieurs

Voici à quoi ça ressemble: