web-dev-qa-db-fra.com

masquer la barre de défilement et afficher en survol comme la nouvelle barre latérale de chat de Facebook

Facebook vient de mettre à jour le chat (encore une fois) et maintenant une nouvelle barre latérale fixe reste à gauche de l'écran. lorsque son contenu déborde, une barre de défilement apparaît, mais uniquement si elle défile avec la molette de la souris ou si la souris se déplace sur (ou près) de la barre de défilement. Il disparaît si la souris n'est pas dessus. il est très utile pour les objets fenêtrés (comme le chat lui-même). Alors, comment ça marche?

PS je cherche une solution html5/css/javascript pure (pas de jquery ou autre), aucun support de navigateur nécessaire, devrait fonctionner dans la dernière chrome et rien de plus, puisque je fais une application pour chrome uniquement.

40
Achshar

Voici une mise à jour du message de Stephen P. pour avoir une barre de défilement stylisée.

http://jsfiddle.net/PVZB8/139/

-Mike

62
Michael G.

Vous définissez le débordement sur none normalement et le modifiez pour avoir overflow-y: scroll En vol stationnaire.

Voir http://jsfiddle.net/PVZB8/

41
Stephen P

Ce n'est peut-être pas la réponse exacte à la question, car il est demandé une solution sans jQuery. Mais je suis venu ici via un moteur de recherche et j'utilise jQuery. Si vous voulez une solution qui soit aussi fluide que et ressemble exactement à Facebook , jetez un œil à ceci:

Voir http://rocha.la/jQuery-slimScroll

19
iblue

Vous pouvez également consulter nano scroller .

8
ip.

Je voudrais relancer ce fil pour le bénéfice des futurs visiteurs et résumer essentiellement les autres réponses à ce fil. Je préfère jsFancyScroll (merci Leo Selig !) Ainsi que nanoScrollerJS (merci ip !) Car ils ont tous les deux " conserver l'expérience de défilement naturelle fournie par le système d'exploitation. " Essayez simplement de rechercher une sélection de texte, puis de regarder l'emplacement de la barre de défilement dans les différentes implémentations pour voir ce que je veux dire.

Si vous ne vous souciez pas du style de la barre de défilement et que vous souhaitez juste qu'elle se masque automatiquement, la réponse de Stephen P semble être la plus élégante et la mieux prise en charge.

4
Kevin Jin