Barre de défilement personnalisée CSS en div

327

Comment puis-je personnaliser une barre de défilement via CSS (feuilles de style en cascade) pour une page divet non pour la page entière?

css  html  scrollbar 
— harisdev
source
Appliquez overflow:auto;juste à cela <div>. Des détails supplémentaires?
— Rob W
Je l'ai fait, mais j'ai besoin d'une barre de défilement personnalisée, euh .. conception de la barre de défilement
— harisdev
Couleur personnalisée? Cela n'est pris en charge que dans IE, et non dans d'autres navigateurs modernes. Cela ne peut pas être réalisé en utilisant du CSS pur.
— Rob W
1
Solution JS la plus simple (CSS ne prend pas en charge plusieurs navigateurs) - yaireo.github.io/fakescroll
— vsync
— Buzinas

Réponses:

688

J'ai pensé qu'il serait utile de consolider les dernières informations sur les barres de défilement, le CSS et la compatibilité du navigateur.

Prise en charge de la barre de défilement CSS

Actuellement, il n'existe aucune définition de style CSS de barre de défilement inter-navigateurs. L'article du W3C que je mentionne à la fin a 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» et d'autres. Ces propriétés sont illégales: elles ne sont définies dans aucune spécification CSS ni marquées comme propriétaires (en les préfixant avec "-vendor-")

Microsoft

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

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 désormais sa propre version:

Firefox (Gecko)

À partir de la version 64, Firefox prend en charge le style de barre de défilement via les propriétés scrollbar-color(partiellement, brouillon W3C ) et scrollbar-width( brouillon W3C ). Quelques bonnes informations sur l'implémentation peuvent être trouvées dans cette réponse .

Style de barre de défilement inter-navigateur

Les bibliothèques et plug-ins JavaScript peuvent fournir une solution multi-navigateur. Il existe de nombreuses options.

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

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

Juste au cas où vous voudriez empêcher un style de barre de défilement qui n'a pas été correctement préfixé avec "-vendor", cet article sur W3C fournit quelques instructions de base . Fondamentalement, vous devrez ajouter le 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 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 / sources en double ou similaires non liées ci-dessus

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

— JSuar
source
228
Le Web existe depuis plus de deux décennies et il n'existe toujours pas de méthode standard pour styliser les barres de défilement. Vingt ans de comités de normalisation ne remarquant pas que les gens font défiler les choses. Il n'y a pas de taux de applaudissements lents et sarcastiques qui exprimeraient correctement ce que je ressens. Mais un délai de 20 ans entre le premier et le deuxième clap serait, je pense, approprié. Pour une certaine perspective, je n'étais pas encore né quand WWW est sorti, et je suis ingénieur en informatique maintenant. Bravo, W3C.
— Parthian Shot
3
Juste pour ajouter mes deux cents: Gmail et Youtube ont une barre de défilement stylisée dans Chrome, et une native dans Explorer et Firefox. Si ces normes sont assez bonnes pour eux, c'est assez bien pour moi aussi
— yonatanmn
9
@ PaulD.Waite Eh bien, peut-être, mais cela peut être appliqué à n'importe quoi. Et CSS existe en tant que langage précisément pour que les concepteurs puissent choisir de remplacer les valeurs par défaut. L'idée est qu'un mauvais concepteur d'interface utilisateur peut rendre n'importe quel élément non intuitif, mais dès que vous supposez que le concepteur de site est incompétent, quel est l'intérêt de permettre la personnalisation des pages?
— Parthian Shot
6
@ PaulD.Waite De toute évidence, ce n'est pas une de ces choses. En partie parce que c'est dans la zone de l'écran que le concepteur du site devrait contrôler entièrement, de toute façon, donc cela ne pose aucun risque pour la sécurité, et en partie parce que clairement - en pratique - c'est un non-problème. De nombreux sites mettent en œuvre leurs propres hacks pour créer des éléments qui ressemblent et se comportent comme des barres de défilement, et ils fonctionnent très bien. Non seulement ils fonctionnent bien et sont plus beaux, mais les gens savent vraiment comment les utiliser, ce qui est important. Malheureusement, parce que ce sont des hacks, ils ne fonctionnent pas toujours bien avec des choses comme la fonctionnalité d'impression.
— Parthian Shot
5
Cette réponse ne répond pas complètement à sa question, qui était de savoir comment appliquer des styles de barre de défilement à un div spécifique , plutôt qu'à une page entière.
— Stewart
14

Essayez ceci

Source: https://nicescroll.areaaperta.com/

Implémentation simple 

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

Il s'agit d'une barre de défilement du plugin jQuery, donc vos barres de défilement sont contrôlables et se ressemblent sur les différents systèmes d'exploitation.

— Dilusha Gonagala
source
Je suis sûr que c'est probablement personnalisable, mais la démo sur leur page défile beaucoup trop lentement et la barre de défilement est beaucoup trop difficile à saisir.
— Goose
4
Comme pratiquement tous les plugins jQuery - [shudders] - c'est terriblement lent comparé aux implémentations de défilement accélérées GPU natives, filetées. Complètement inadapté aux applications sérieuses et gênant pour une bonne UX. Je vous recommande d'éviter cela, sauf s'il s'agit d'un site Web de jouets.
— John Weisz du
2
Je déteste quand les gens appellent quelque chose de pur javascript puis BAM! un plugin jquery.
— Dinh Tran
Je ne recommanderais pas d'utiliser nicescroll, car il désactive la fonctionnalité du navigateur. Le défilement avec un clic du milieu ne fonctionne pas avec nicescroll.
— Aloso
j'adore ce niceScroll, il n'ajoute pas d'élément wrapper div around ce qui signifie qu'il ne casse pas la structure html
— datdinhquoc
11

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

Certains navigateurs prennent en charge des règles CSS non spécifiques, comme ::-webkit-scrollbardans Webkit, mais ce n'est pas idéal car cela ne fonctionnera que dans Webkit. IE avait quelque chose comme ça aussi, mais je ne pense pas qu'ils le soutiennent plus.

— elclanrs
source
2
réponse obsolète
— T.Todua
1
@ T.Todua Qu'est-ce qui est obsolète dans cette réponse?
— kojow7
6

Comme beaucoup de gens, je cherchais quelque chose qui était:

  • Style et fonctionnalité cohérents sur la plupart des navigateurs modernes
  • Pas une extension ridicule jQuery gonflée de 3000 lignes cr * p

... Mais hélas - rien!

Eh bien, si un travail en vaut la peine ... J'ai pu mettre quelque chose en place en 30 minutes environ. Avertissement: il y a pas mal de problèmes connus (et probablement encore quelques inconnus), mais cela me fait me demander à quoi servent les autres 2920 lignes de JS 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>
Développer l'extrait

— ne1410s
source
1
fond: gradient linéaire (à droite, rouge, jaune);
— xgqfrms
5

J'ai essayé beaucoup de plugins, la plupart d'entre eux ne supportent pas tous les navigateurs, je préfère que iScroll et nanoScroller fonctionnent 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 toucher!

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

— Ouadie
source
nano scroller ne prend pas en charge le défilement horizontal.
— FlavorScape
Le dépôt est archivé github.com/cubiq/iscroll Je suggérerais de chercher d'autres alternatives
— Ouadie
5

Veuillez vérifier ce lien. Exemple avec démonstration 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

2
Merci pour la démo. Je l'ai d'abord exécuté avec Firefox 58.0.2 (64 bits, Windows 7 Pro / 64) et toutes ses barres de défilement étaient identiques. Puis a couru avec la version 65.0.3325.162 de Chrome (version officielle) (64 bits) et ils étaient tous différents. Donc (peut-être involontairement) vous avez démontré les limites de l' -webkit-approche.
— CODE-REaD
4

Firefox nouvelle version (64) prend en charge le module CSS Scrollbars niveau 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>
Développer l'extrait

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

Barre de défilement Firefox

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

— Fatih Hayrioğlu
source
3

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;
}

Production:

entrez la description de l'image ici

— Denys Wessels
source
3 
.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 joli mobile / osx comme un.

— csomakk
source
1
Une réponse plus concise. À mon humble avis, il a effectivement répondu à la question du PO qui était de savoir comment coiffer une seule div. Agréable.
— Danimal Reks
2

Il existe un moyen d'appliquer des barres de défilement personnalisées à des éléments div personnalisés dans vos documents HTML. Voici un exemple qui aide. https://codepen.io/adeelibr/pen/dKqZNb Mais pour 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;
}
— Adeel Imran
source
2

C'est ce que Google utilise depuis longtemps dans certaines de ses applications. Voyez dans le code que, si vous appliquez les classes suivantes, elles masquent en quelque sorte la barre de défilement dans Chrome, mais cela fonctionne toujours.

Les classes sont jfk-scrollbar, jfk-scrollbar-borderlessetjfk-scrollbar-dark

.testg{ border:1px solid black;  max-height:150px;  overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}

/* The google css code for scrollbars */
::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
    background: transparent
}
body::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
.jfk-scrollbar::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
.jfk-scrollbar::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
.jfk-scrollbar::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar::-webkit-scrollbar-corner {
    background: transparent
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body.jfk-scrollbar::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
<div class="testg">
    <div class="content">
        Look Ma'  my scrollbars doesn't have arrows <br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
    <div class="content">
        Look Ma'  my scrollbars dissapear in chrome<br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
Développer l'extrait

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

Je viens de trouver utile de supprimer les flèches des barres de défilement. Depuis 2015, il a été utilisé dans Google Maps lors de la recherche de lieux dans la liste des résultats dans son interface utilisateur de conception matérielle.

— le0diaz
source
1

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

Prise en charge sur CHROME

Voici une démo pour webkit scrollbar Webkit Scrollbar DEMO

Si vous cherchez plus d'exemples Cochez ceci Plus d'exemples

Une autre méthode est le plugin Jquery Scroll Bar

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

Téléchargez le plugin à partir de Télécharger ici

Comment utiliser et pour plus d'options VÉRIFIEZ CECI

DEMO

— Nikz
source
1

J'ai essayé beaucoup de parchemins JS et CSS et j'ai trouvé que c'était très facile à utiliser et testé sur IE et Safari et FF et fonctionnait bien

COMME @thebluefox le 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

— Yousef Altaf
source
0

Pour les personnes toujours à la recherche d'une bonne solution je viens de découvrir ce plugin simplebar

Bibliothèque personnalisée de barres de défilement vanilla javascript avec défilement natif, simple, légère, facile à utiliser et multi-navigateur.

Dans mon cas, je cherchais des solutions reactJS, l'auteur fournit également des wrappers pour react, angular, vue et des exemples suivants

— ManBearPig
source
0

Les navigateurs Webkit (tels que Chrome, Safari et Opera) prennent en charge le pseudo-élément non standard :: - webkit-scrollbar , qui nous permet de modifier l'apparence de la barre de défilement du navigateur.

Remarque: La :: - webkit-scrollbar n'est pas prise en charge par Firefox ou IE et Edge.

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

div {
  width: 15rem;
  height: 8rem;
  padding: .5rem;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  overflow: auto;
}

.box::-webkit-scrollbar {
  width: .8em;
}

.box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
 
.box::-webkit-scrollbar-thumb {
  background-color: dodgerblue;
}
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
Développer l'extrait

Référence: comment créer une barre de défilement personnalisée

— Vishal
source
0

Supposons que vous ayez le div comme 

<div class="custom_scroll"> ... </div>

Appliquer des styles CSS en tant que 

//custom scroll style definitions
.custom_scroll
{
  overflow-y: scroll;
}

//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar
{
    width: 5px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

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

Le défilement résultant apparaîtra comme

entrez la description de l'image ici

— Saumyajit
source
-1

Ou utilisez quelque chose comme ça:

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};

Et initialisez:

<body onload="new MiniScroll(this);"></body>

Et personnalisez:

.scroll-place { // ... // }
.scroll { // ... // }
— Максим Владимирович
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.