web-dev-qa-db-fra.com

Barre de défilement personnalisée CSS en div

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

csshtmlscrollbar
298
harisdev

J'ai pensé qu'il serait utile de consolider les informations les plus récentes sur les barres de défilement, les CSS et la compatibilité du navigateur. 

Barre de défilement CSS

Il n'existe actuellement aucune définition de style CSS pour la barre de défilement inter-navigateurs. L'article du W3C Je mentionne à la fin la déclaration suivante et a été récemment mis à jour (10 octobre 2014):

Certains navigateurs (IE, Konqueror) prennent en charge les propriétés non standard 'scrollbar-shadow-color', 'scrollbar-track-color', etc. Ces propriétés sont illégales: elles ne sont définies ni dans une spécification CSS, ni comme propriétaires (en les préfixant par "-vendor-")

Microsoft

Comme d'autres l'ont mentionné, Microsoft prend en charge le style de barre de défilement, mais uniquement pour IE8 et les versions ultérieures.

Exemple:

<!-- language: lang-css -->

    .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:

Firefox (Gecko)

À partir de la version 64, Firefox prend en charge le style de barre de défilement dans les propriétés scrollbar-color (partiellement, brouillon W3C ) et scrollbar-width ( Brouillon W3C ). Vous trouverez quelques informations utiles sur la mise en œuvre dans cette réponse .

Style de barre de défilement inter-navigateur

Les bibliothèques et les plug-ins JavaScript peuvent constituer une solution inter-navigateurs. Il y a beaucoup d'options.

La liste pourrait s'allonger encore. Votre meilleur choix est de rechercher, rechercher et tester les solutions disponibles. Je suis sûr que vous pourrez trouver quelque chose qui conviendra à vos besoins.

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

Juste au cas où vous voudriez éviter le style de barre de défilement qui n’a pas été préfixé correctement par "-vendor", cet article sur W3C fournit des instructions de base . Fondamentalement, vous devrez ajouter le code CSS suivant à une feuille de style utilisateur associée à votre navigateur. Ces définitions remplaceront le style de barre de défilement non valide sur toute page visitée.

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 en double ou similaires/Source non liée ci-dessus

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

654
JSuar

Essayez ceci 

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

Mise en œuvre simple 

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

Il s'agit d'une barre de défilement du plug-in jQuery, de sorte que vos barres de défilement sont contrôlables et ont la même apparence sur les différents systèmes d'exploitation.

12
Dilusha Gonagala

Les barres de défilement personnalisées ne sont pas possibles avec CSS, vous aurez besoin de la magie JavaScript. 

Certains navigateurs prennent en charge des règles CSS non spécifiées, telles que ::-webkit-scrollbar dans Webkit, mais ne sont pas idéales car elles ne fonctionnent que dans Webkit. IE avait quelque chose comme ça aussi, mais je ne pense pas qu'ils le soutiennent plus. 

10
elclanrs

Je pense qu'il manque une chose dans ce fil. Si vous souhaitez implémenter le défilement via un plugin, le meilleur de 2014 est Sly .

Il s'agit d'une barre de défilement javascript pure, de sorte que vos barres de défilement sont contrôlables et se ressemblent sous les différents systèmes d'exploitation. 

Il a les meilleures performances et fonctionnalités. Aucun autre ne vient même près. Ne perdez pas de temps à choisir parmi une myriade de bibliothèques à moitié cuites.

8
Capaj

J'ai essayé beaucoup de plugins, la plupart ne supportant pas tous les navigateurs, je préfère 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 au toucher!

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

5
Ouadie

Comme beaucoup de gens, je cherchais quelque chose qui soit:

  • Un style cohérent et fonctionnel sur la plupart des navigateurs modernes
  • Pas de ridicule extension de jQuery gonflée de 3000 lignes cr * p

... Mais hélas - rien!

Eh bien, si un travail en vaut la peine ... Je suis capable de mettre en place quelque chose en environ 30 minutes . Je me demande pourquoi les 2920 autres lignes de JS sont présentes dans de nombreuses offres! 

var dragParams;
	window.addEventListener('load', init_myscroll);

	/* TODO: Much to do for v axis! */

	function bardrag_mousemove(e) {
	  var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
	  pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
	  dragParams.slider.style.left = pos + 'px';
	  updateScrollPosition(dragParams.slider, pos);
	}

	function updateScrollPosition(slider, offsetVal) {
	  var bar = slider.parentNode;
	  var myscroll = bar.parentNode;
	  var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
	  var maxSlide = bar.offsetWidth - slider.offsetWidth;
	  var viewX = maxView * offsetVal / maxSlide;
	  myscroll.scrollLeft = viewX;
	  bar.style.left = viewX + 'px';
	}

	function drag_start(e) {
	  var slider = e.target;
	  var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
	  dragParams = {
	    clientX: e.clientX,
	    offsetLeft: slider.offsetLeft,
	    slider: e.target,
	    maxLeft: maxLeft
	  };
	  e.preventDefault();
	  document.addEventListener('mousemove', bardrag_mousemove);
	}

	function drag_end(e) {
	  e.stopPropagation();
	  document.removeEventListener('mousemove', bardrag_mousemove);
	}

	function bar_clicked(e) {
	  var bar = e.target;
	  var slider = bar.getElementsByClassName('slider')[0];
	  if (bar.className == 'h bar') {
	    var maxSlide = bar.offsetWidth - slider.offsetWidth;
	    var sliderX = e.offsetX - (slider.offsetWidth / 2);
	    sliderX = Math.max(0, Math.min(sliderX, maxSlide));
	    slider.style.left = sliderX + 'px';
	    updateScrollPosition(slider, sliderX);
	  }
	}

	function init_myscroll() {
	  var myscrolls = document.getElementsByClassName('container');
	  for (var i = 0; i < myscrolls.length; i++) {
	    var myscroll = myscrolls[i];
	    var style = window.getComputedStyle(myscroll);
	    if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
	      addScroller(false, myscroll);
	    }
	    if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
	      addScroller(true, myscroll);
	    }
	  }
	}

	function addScroller(isX, myscroll) {
	  myscroll.className += ' myscroll';
	  var bar = document.createElement('div');
	  var slider = document.createElement('div');
	  var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
	  var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
	  var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
	  slider.style.width = 100 * sliderPx / offsetDim + '%';
	  slider.className = 'slider';
	  bar.className = isX ? 'h bar' : 'v bar';
	  bar.appendChild(slider);
	  myscroll.appendChild(bar);

	  bar.addEventListener('click', bar_clicked);
	  slider.addEventListener('mousedown', drag_start);
	  slider.addEventListener('mouseup', drag_end);
	  bar.addEventListener('mouseup', drag_end);
	  document.addEventListener('mouseup', drag_end);
	}
body {
  background-color: #66f;
}
.container {
  background-color: #fff;
  width: 50%;
  margin: auto;
  overflow: auto;
}
.container > div:first-of-type {
  width: 300%;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */

.myscroll {
  overflow: hidden;
  position: relative;
}
.myscroll .bar {
  background-color: lightgrey;
  position: absolute;
}
.myscroll {
  padding-bottom: 20px;
}
.myscroll .h {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.myscroll .slider {
  background-color: grey;
  position: absolute;
}
.myscroll .h .slider {
  height: 100%;
}
<div class="container">
  <div></div>
</div>

4
ne1410s

S'il vous plaît vérifier ce lien. Exemple avec démo de travail

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

Barres de défilement CSS

4
user7005809

Voici un exemple de kit Web qui fonctionne pour Chrome et Safari:

CSS: 

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

Sortie:

enter image description here

3
Denys Wessels

Pour votre information, c’est ce que Google utilise depuis longtemps dans certaines de ses applications. Vérifiez dans le jsfiddle que si vous appliquez les classes suivantes, elles cachent en quelque sorte la barre de défilement en chrome, mais cela fonctionne toujours. 

jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark

http://jsfiddle.net/76kcuem0/32/

Je viens de trouver utile de supprimer les flèches des barres de défilement. depuis 2015, il est utilisé dans maps.google.com lors de la recherche d'endroits dans la liste des résultats dans son interface de conception de matériau.

2
le0diaz

J’ai essayé beaucoup de scrolls JS et CSS et j’ai trouvé que c’était très facile à utiliser et à tester sur IE, Safari et FF et a bien fonctionné.

AS @thebluefox suggère

Voici comment ça marche

Ajoutez le script ci-dessous au 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

Et ceci ici dans le paragraphe où vous devez faire défiler

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

Pour plus de détails, visitez la page du plugin 

Barre de défilement personnalisée FaceScroll

j'espère que ça aide

1
Yousef Altaf

La nouvelle version de Firefox (64) supporte le module CSS Scrollbars Level 1 

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Firefox scrollbar

https://codepen.io/fatihhayri/pen/pqdrbd

1
Fatih Hayrioğlu

La barre de défilement Webkit ne prend pas en charge la plupart des serveurs.

Supports sur CHROME

Voici une démo pour webkit scrollbar Webkit Scrollbar DEMO

Si vous cherchez plus d'exemples, cochez cette Plus d'exemples

Une autre méthode est Jquery Scroll Bar Plugin

Il prend en charge sur tous les navigateurs et facile à appliquer

Téléchargez le plugin de Téléchargez ici

Comment utiliser et pour plus d'options CHECK THIS

DEMO

1
Nikz
.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

m'a donné un Nice mobile/OSX comme un.

1
csomakk

Il existe un moyen d'appliquer des barres de défilement personnalisées aux éléments div personnalisés de vos documents HTML. Voici un exemple qui aide. https://codepen.io/adeelibr/pen/dKqZNb Mais comme l'essentiel. Vous pouvez faire quelque chose comme ça.

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

Le fichier CSS ressemble à ceci.

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}
0
Adeel Imran