web-dev-qa-db-fra.com

Comment créer une barre de défilement personnalisée sur une div (style Facebook)

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

Est-ce seulement css ou du javascript?

Si oui, puis-je avoir une idée de ce à quoi ressemble le code?

Cette question est spécifique au style de la barre de défilement de Facebook et non à la création simple d'une barre de défilement personnalisée

javascripthtmlcssscrollbar
42
Jerome Ansia

Ce lien devrait vous aider à démarrer. En bref, une div qui a été stylée pour ressembler à une barre de défilement est utilisée pour intercepter les événements de clic et glisser. Des méthodes permettant de faire défiler le contenu d'une autre div qui est définie sur une hauteur arbitraire et comporte généralement une règle css de débordement: scroll (il existe des variantes dans les règles css mais vous en avez une idée).

Je suis tout au sujet de l'expérience d'apprentissage - mais une fois que vous avez appris comment cela fonctionne, je vous recommande d'utiliser une bibliothèque (il y en a beaucoup) pour le faire. C'est une de ces choses "ne pas réinventer" ...

48
Daniel Szabo

Facebook utilise une technique très intelligente que j'ai décrite dans le contexte de mon plugin de barre de défilement jsFancyScroll:

Le contenu défilant est en fait déroulé de manière native par les mécanismes de défilement du navigateur, tandis que la barre de défilement native est masquée à l'aide de définitions de débordement et que la barre de défilement personnalisée est synchronisée par l'écoute d'événement bidirectionnelle.

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

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

Je le recommande fortement aux plugins tels que TinyScrollbar qui posent des problèmes de performances terribles!

12
Leo Selig

Si vous cherchez un Facebook comme une barre de défilement, je vous recommande vivement de jeter un coup d'œil à celui-ci:

http://rocha.la/jQuery-slimScroll

11
Mahdi

J'ai résolu ce problème en ajoutant un autre div en tant que frère au contenu défilant div. Sa hauteur est définie sur le rayon des bordures courbes. Il y aura des problèmes de conception si vous souhaitez que le contenu soit déplacé au bas de la page, ou que le texte que vous souhaitez insérer dans cette nouvelle div, etc. mais pour mon interface utilisateur cette mince div 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>

Principaux faits saillants CSS:

  • Votre CSS définirait la zone de contenu avec une hauteur et un débordement pour permettre l’affichage de la barre de défilement.
  • La classe window a les mêmes angles de diamètre que le titre et le pied de page
  • L'ombre portée, si vous le souhaitez, n'est donnée qu'à la classe window
  • La hauteur du pied de page div est la même que le rayon des coins inférieurs

Voici à quoi ça ressemble:

Bottom right corner

4
DaChew