CSS personnalisé de barre de défilement dans la div

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

290
demandé sur JSuar 2012-02-12 22:21:32

14 réponses

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

de la Barre de Défilement du Support technique CSS

à l'heure actuelle, il n'existe aucune définition de style CSS pour les barres de défilement croisées. l'article du W3C je mentionne à la fin a la déclaration suivante et a été récemment mis à jour (10 Oct 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 et ne sont pas non plus marquées comme propriétaires (en les préfixant par "-Vendeur-")

Microsoft

comme d'autres l'ont mentionné, Microsoft supporte le style de barre de défilement, mais seulement pour IE8 et au-dessus.

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 & Safari (WebKit)

de même, WebKit a maintenant sa propre version:

Firefox (Gecko)

Firefox n'a pas sa propre version des styles de barre de rouleau selon ce donc répondre.

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

vous devrez vous en tenir à jQuery.

Beaucoup de gens aimeraient cette fonctionnalité, voir:

https://bugzilla.mozilla.org/show_bug.cgi?id=77790

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

de la Croix-navigateur Barre de Défilement Style

les bibliothèques JavaScript et les plug-ins peuvent fournir une solution de navigation croisée. Il existe de nombreuses options.

La liste pourrait continuer. Votre meilleur pari est de chercher, rechercher et tester les solutions disponibles. Je suis sûr que vous trouverez quelque chose qui répondra à vos besoins.

Empêcher L'Barre De Défilement Style

Juste au cas où vous voulez empêcher la barre de défilement style qui n'a pas été correctement avec le préfixe "fournisseur", cet article au W3C fournit quelques instructions de base . Fondamentalement, vous aurez besoin d'ajouter les CSS suivants à une feuille de style utilisateur associée à votre navigateur. Ces définitions outrepasseront le défilement non valide style bar sur n'importe quelle page 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;
}

les Questions identiques ou Similaires de la Source / Pas de lien ci-Dessus

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

644
répondu JSuar 2018-08-02 18:41:28

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

certains navigateurs prennent en charge des règles CSS non spécifiques, comme ::-webkit-scrollbar dans 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.

11
répondu elclanrs 2015-03-25 19:02:49

Donner à ceci un essai

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

Simple Mise En Œuvre

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

c'est un plugin jQuery scrollbar, donc vos scrollbars sont contrôlables et ressemblent à travers les différents OS.

11
répondu Dilusha Gonagala 2018-06-14 08:43:48

je pense qu'il manque une chose dans ce fil. Si vous souhaitez par hasard mettre en œuvre le scrolling via plugin, de loin le meilleur en 2014 est Sly .

c'est un scrollbar pur javascript, donc vos scrollbars sont contrôlables et ressemblent à travers les différents OS.

Il a les meilleures performances et fonctionnalités. Aucun autre vient même à proximité. Ne perdez pas de temps à choisir parmi des myriades de buggy à demi bibliothèque.

8
répondu Capaj 2017-04-10 23:07:21

j'ai essayé beaucoup de plugins, la plupart d'entre eux ne prennent pas en charge 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 fonctionnent pas avec touch!

demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/

Démo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

4
répondu Ouadie 2014-01-08 13:56:43

voici un exemple de webkit 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
répondu Denys Wessels 2014-06-12 07:20:31

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

  • toujours stylisé et fonctionnel sur la plupart des navigateurs modernes
  • ce n'est Pas quelques ridicule 3000 ligne de ballonnement jQuery extension de cr*p

...Mais hélas rien!

Eh bien, si un travail en vaut la peine... J'ai pu faire démarrer quelque chose en 30 minutes. Disclaimer: il y en a assez peu connus (et probablement quelques-uns mais je me demande à quoi servent les autres 2920 lignes de JS dans beaucoup d'offrandes!

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>
3
répondu ne1410s 2016-06-14 21:19:12

veuillez vérifier ce lien. Exemple avec la 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;
}

CSS Barres de Défilement

3
répondu 2016-10-12 06:40:01

POUR INFO, c'est ce que google utilise dans certaines de ses applications depuis longtemps. Vérifiez dans le jsfiddle que si vous appliquez les classes suivantes, ils cachent d'une certaine manière la barre de défilement dans chrome, mais c'est toujours des travaux.

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

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

je viens de trouver utile d'enlever les flèches des barres de défilement. en 2015, il a été utilisé dans maps.google.com lors de la recherche de places dans la liste des résultats dans sa conception du matériau UI.

2
répondu le0diaz 2017-10-25 05:01:06

Webkit scrollbar ne supporte pas la plupart des browers.

Supports Sur CHROME

Voici une démo pour webkit scrollbar WebKit Scrollbar DEMO

si vous cherchez plus d'exemples, Cochez cette case plus d'exemples


une autre méthode est Jquery Plugin De Barre De Défilement

il soutient sur tous les navigateurs et facile à appliquer""

télécharger le plugin de télécharger ici

comment utiliser et pour plus d'options cochez cette case

DÉMO

1
répondu Nikz 2013-07-03 10:26:53

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

comme le suggère @thebluefox

Voici comment ça marche

ajouter 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 le plugin page

FaceScroll Personnalisé de barre de défilement

espoir aide de la

1
répondu Yousef Altaf 2017-03-21 09:28:29
.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 bon mobile/osx comme un.

1
répondu csomakk 2017-03-28 12:41:25

il y a un moyen par lequel vous pouvez appliquer des barres de défilement personnalisées à des éléments div personnalisés dans vos documents HTML. Voici un exemple qui permet de. https://codepen.io/adeelibr/pen/dKqZNb mais en gros. Vous pouvez faire quelque chose comme cela.

<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
répondu Adeel Imran 2018-06-26 11:38:25

ou utiliser quelque chose comme ceci:

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

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

et personnaliser:

.scroll-place { // ... // }
.scroll { // ... // }
-1
répondu Максим Владимирович 2016-08-23 13:47:51