J'ai essayé ce CSS pour tous les principaux navigateurs et je l'ai testé : Les couleurs personnalisées fonctionnent bien sur la barre de défilement.
Oui, il y a des limitations sur plusieurs versions de différents navigateurs.
/* Only Chrome */
html::-webkit-scrollbar {width: 17px;}
html::-webkit-scrollbar-thumb {background-color: #0064a7; background-clip: padding-box; border: 1px solid #8ea5b5;}
html::-webkit-scrollbar-track {background-color: #8ea5b5; }
::-webkit-scrollbar-button {background-color: #8ea5b5;}
/* Only IE */
html {scrollbar-face-color: #0064a7; scrollbar-shadow-color: #8ea5b5; scrollbar-highlight-color: #8ea5b5;}
/* Only FireFox */
html {scrollbar-color: #0064a7 #8ea5b5;}
/* View Scrollbar */
html {overflow-y: scroll;overflow-x: hidden;}
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div id="logo"><img src="/logo.png">HTML5 Layout</div>
<nav>
<ul>
<li><a href="http://stackoverflow.com/">Home</a>
<li><a href="https://html-css-js.com/">HTML</a>
<li><a href="https://html-css-js.com/css/code/">CSS</a>
<li><a href="https://htmlcheatsheet.com/js/">JS</a>
</ul>
</nav>
</header>
<section>
<strong>Demonstration of a simple page layout using HTML5 tags: header, nav, section, main, article, aside, footer, address.</strong>
</section>
<section id="pageContent">
<main role="main">
<article>
<h2>Stet facilis ius te</h2>
<p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>
</article>
<article>
<h2>Illud mollis moderatius</h2>
<p>Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>
</article>
<article>
<h2>Ex ignota epicurei quo</h2>
<p>Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p>
</article>
<article>
<h2>His at autem inani volutpat</h2>
<p>Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p>
</article>
</main>
<aside>
<div>Sidebar 1</div>
<div>Sidebar 2</div>
<div>Sidebar 3</div>
</aside>
</section>
<footer>
<p>© You can copy, edit and publish this template but please leave a link to our website | <a href="https://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p>
<address>
Contact: <a href="mailto:me@example.com">Mail me</a>
</address>
</footer>
</body>
</html>
1 votes
Veuillez nous expliquer comment vous pouvez le faire en utilisant jQuery. Je suis confronté au même problème mais j'ai utilisé CSS pour le résoudre pour Webkit. Cependant, Firefox pose un problème que votre solution jQuery pourrait résoudre.
1 votes
Je recommande d'utiliser le plugin jQuery jscrollpane.
0 votes
Il y a un problème avec jScrollPane dans Firefox. jScrollPane fonctionne parfaitement dans Chrome mais dans Firefox vous avez une fenêtre vide. système barre de défilement à droite de la barre de défilement du jScrollPane. Il ne doit y avoir qu'une seule barre de défilement
1 votes
Ce n'est pas vrai. Si c'est le cas, c'est que vous avez commis une erreur quelque part.
0 votes
Voir ma réponse ici : stackoverflow.com/questions/7357203/custom-scrollbars/
0 votes
J'aimerais recommander
fakescroll- Un petit script vanilla-js pour des barres de défilement personnalisées0 votes
J'ai ajouté un aperçu de la solution : stackoverflow.com/a/70909679/14824067 . Et pourquoi tant d'entre eux utilisent-ils jquery ; )