Comment créer un scrollbar personnalisé sur un div (Facebook style)
je me demande comment le scrollbar personnalisé sur Facebook a été fait.
Est-il uniquement du css ou du javascript?
Si oui puis-je avoir une idée de ce à quoi ressemble le code?
cette question est spécifique à Facebook scrollbar style et non pas comment simplement avoir un scrollbar personnalisé
5 réponses
ce lien devrait vous aider à démarrer. Pour faire court, une div qui a été stylée pour ressembler à une barre de défilement est utilisée pour attraper des évènements de click-and-drag. Câblé à ces événements sont des méthodes qui font défiler le contenu d'un autre div qui est défini à une hauteur arbitraire et a typiquement une règle css de débordement:scroll (il y a des variantes sur les règles css mais vous obtenez l'idée).
je suis tout au sujet de l'expérience d'apprentissage -- mais après que vous avez appris comment il fonctionne, je recommande d'utiliser une bibliothèque (qui sont nombreuses) de le faire. C'est un de ces trucs de "ne pas réinventer"...
EDIT Si vous voulez sauter la phase d'apprentissage tout à fait, jassi9911 a posté un lien vers un plugin jQuery qui est mort-simple à utiliser. De bonnes choses.
Facebook utilise une technique très intelligente que j'ai décrit dans le contexte de mon plugin scrollbar jsfancyscroll:
le contenu scrollé est en fait scrollé nativement par les mécanismes de scrolling du navigateur tandis que la barre de défilement native est cachée en utilisant des définitions de débordement et la barre de défilement personnalisée est maintenue en synchronisation par l'écoute bidirectionnelle des événements.
n'hésitez pas à utiliser mon plugin pour votre projet: :)
https://github.com/leoselig/jsFancyScroll /
je le recommande fortement sur les plugins tels que TinyScrollbar qui viennent avec de terribles problèmes de performance!
si vous êtes à la recherche D'une barre de défilement Facebook like, alors je vous recommande fortement de jeter un oeil à celui-ci:
j'ai résolu ce problème en ajoutant une autre div comme un frère à la Div de contenu de défilement. Sa hauteur est réglée sur le rayon des bordures courbes. Il y aura des problèmes de design si vous avez du contenu que vous voulez pointer vers le bas, ou du texte que vous voulez introduire dans cette nouvelle div, etc. mais pour mon UI cette div mince n'est pas un problème.
le vrai truc 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>
faits saillants importants CSS:
- votre CSS définirait la région de contenu avec une hauteur et un débordement pour permettre à la barre de défilement(s) d'apparaître.
- la classe de fenêtre obtient les mêmes angles de diamètre que le titre et le pied de page
- l'ombre de chute, si désiré, n'est donnée qu'à la classe de fenêtre
- la hauteur du div du pied de page est la même que le rayon des coins inférieurs
voilà à quoi ça ressemble:
