Barre de défilement personnalisée en CSS dans un div

Question

Comment puis-je personnaliser une barre de défilement via CSS (Cascading Style Sheets) pour une div et non la page entière ?

Answer 1

J'ai pensé qu'il serait utile de regrouper les dernières informations sur les barres de défilement, les CSS et la compatibilité des navigateurs.

Support CSS de la barre de défilement

Actuellement, il n'existe pas de définitions de style CSS pour la barre de défilement inter-navigateurs. L'article du W3C Je mentionne à la fin a la déclaration suivante et a été récemment mis à jour (FRI 21 DEC 2012 06:20:49 AM CET) :

Certains navigateurs (IE, Konqueror) prennent en charge les propriétés non standard suivantes 'scrollbar-shadow-color', 'scrollbar-track-color' et autres. Ces propriétés sont illégales : elles ne sont pas définies dans une spécification CSS ni marquées comme propriétaires (en les faisant précéder de "-vendor-"). avec "-vendor-")

Microsoft

Comme d'autres l'ont mentionné, Microsoft prend en charge le style de la barre de défilement ( exemple ) mais, seulement pour IE8 et plus.

• http://msdn.microsoft.com/en-us/library/ie/hh772048(v=vs.85).aspx
• http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx

• Exemple :

  .TA {
      scrollbar-3dlight-color:gold;
      scrollbar-arrow-color:blue;
      scrollbar-base-color:;
      scrollbar-darkshadow-color:blue;
      scrollbar-face-color:;
      scrollbar-highlight-color:;
      scrollbar-shadow-color:
  }

Chrome et Safari (webkit)

De même, webkit a maintenant sa propre version :

• Styliser les barres de défilement : https://www.webkit.org/blog/363/styling-scrollbars/
• Démonstration de tous les styles de barre de défilement de webkit

• De Barres de défilement personnalisées dans WebKit et des CSS pertinents :

  /* pseudo elements */
  ::-webkit-scrollbar              {  }
  ::-webkit-scrollbar-button       {  }
  ::-webkit-scrollbar-track        {  }
  ::-webkit-scrollbar-track-piece  {  }
  ::-webkit-scrollbar-thumb        {  }
  ::-webkit-scrollbar-corner       {  }
  ::-webkit-resizer                {  }
  
  /* pseudo class selectors */
  :horizontal
  :vertical
  :decrement
  :increment
  :start
  :end 
  :double-button
  :single-button
  :no-button
  :corner-present
  :window-inactive

Firefox (Gecko)

Firefox ne dispose pas de sa propre version des styles de barre de défilement. selon cette réponse de SO de Barre de défilement CSS personnalisée pour Firefox .

Il n'y a pas d'équivalent Gecko à ::-webkit-scrollbar et des amis.

Vous devrez vous en tenir à jQuery.

Beaucoup de gens aimeraient cette fonctionnalité, vous voyez :
https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Ce rapport demande exactement la même chose que vous : https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Stylisation de la barre de défilement pour tous les navigateurs

Les bibliothèques JavaScript et les plug-ins peuvent fournir une solution multi-navigateurs. Les options sont nombreuses.

• 20 plugin jQuery Scrollbar avec des exemples (24 juillet 2012)
  • NiceScroll : plugin de défilement jQuery pour les ordinateurs de bureau, les téléphones portables et les appareils tactiles.
  • Défilement de contenu personnalisé jQuery
  • Tiny Scrollbar - Un plugin léger pour jQuery
  • etc.
• 30+ techniques Javascript/Ajax pour les curseurs, les défileurs et les barres de défilement (07 mai 2008)
• 21 tutoriels de stylisme CSS/JavaScript utiles pour les barres de défilement (Août, 2012)
• 15+ Plugins de défilement jQuery gratuits et premiums (26 août 2012)

La liste pourrait être longue. Votre meilleure chance est de chercher, de faire des recherches et de tester les solutions disponibles. Je suis sûr que vous trouverez quelque chose qui répondra à vos besoins.

Empêcher le style illégal de la barre de défilement

Juste au cas où vous voudriez empêcher le style de la barre de défilement qui n'a pas été correctement préfixé avec "-vendeur", Cet article du W3C fournit des instructions de base. . En gros, vous devrez ajouter les feuilles de style CSS suivantes à une feuille de style utilisateur associée à votre navigateur. Ces définitions remplaceront le style invalide de la barre de défilement sur toutes les pages que vous visitez.

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Questions dupliquées ou similaires / Source non liée ci-dessus

• Changer le style des barres de défilement
• Style de la barre de défilement CSS dans les différents navigateurs
• Comment créer une barre de défilement personnalisée sur une div.

Note : Cette réponse contient des informations provenant de diverses sources. Si une source a été utilisée, elle est également mentionnée dans cette réponse.

Answer 2

Essayez-le

Source : http://areaaperta.com/nicescroll/

Mise en œuvre simple

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

Answer 3

Les barres de défilement personnalisées ne sont pas possibles avec les CSS, il faut de la magie JavaScript.

Certains navigateurs prennent en charge des règles CSS non spécifiques, telles que ::-webkit-scrollbar dans Webkit, mais ce n'est pas idéal puisqu'il ne fonctionne que dans Webkit. IE avait aussi quelque chose comme ça, mais je ne pense pas qu'ils le supportent encore.

Une simple recherche sur Google vous donnera la réponse. Barre de défilement personnalisée

Jetez également un coup d'œil à la FAQ sur la façon de poser les bonnes questions et assurez-vous de faire des recherches sur Stack Overflow avant de les poser ; cette question a été posée de nombreuses fois.

Answer 4

Je pense qu'il manque une chose dans ce fil de discussion - juste un conseil sur lequel de tous les plugins de défilement est le meilleur. Si, par hasard, vous souhaitez mettre en œuvre le défilement via un plugin, le meilleur en 2014 est de loin le suivant Sly . Il a les meilleures performances et caractéristiques. Aucun autre ne s'en approche. Ne perdez pas de temps à choisir parmi des myriades de bibliothèques boguées et à moitié développées.

Answer 5

J'ai essayé de nombreux plugins, mais la plupart ne sont pas compatibles avec tous les navigateurs. iScroll et nanoScroller fonctionne pour tous ces navigateurs :

• IE11 -> IE6
• IE10 - WP8
• IE9 - WP7
• IE Xbox One
• IE Xbox 360
• Google Chrome
• FireFox
• Opéra
• Safari

Mais iScroll ne fonctionne pas avec le tactile !

Démonstration iScroll : http://lab.cubiq.org/iscroll/examples/simple/
Démonstration nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/