w3school Barra di scorrimento personalizzata CSS in div




w3school scrollbar css (11)

Come posso personalizzare una barra di scorrimento tramite CSS (Cascading Style Sheets) per un div e non per l'intera pagina?


O usa qualcosa come questo:

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

E inizializza:

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

E personalizzare:

.scroll-place { // ... // }
.scroll { // ... // }

Fai un tentativo

Fonte: http://areaaperta.com/nicescroll/

Implementazione semplice

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

È una barra di scorrimento "puro javascript", quindi le barre di scorrimento sono controllabili e hanno lo stesso aspetto su tutti i vari sistemi operativi.


Penso che manchi una cosa in questa discussione. Se per caso volessi implementare lo scrolling tramite plugin, di gran lunga il migliore nel 2014 è Sly .

È una pura barra di scorrimento javascript, quindi le barre di scorrimento sono controllabili e hanno lo stesso aspetto su tutti i vari sistemi operativi.

Ha le migliori prestazioni e caratteristiche. Nessun altro si avvicina nemmeno. Non perdere tempo a scegliere tra una miriade di librerie buggy con mezza buccia.



Le barre di scorrimento personalizzate non sono possibili con i CSS, avrai bisogno di qualche magia JavaScript.

Alcuni browser supportano regole CSS non specifiche, come ::-webkit-scrollbar in Webkit ma non è l'ideale dato che funzionerà solo in Webkit. Anche IE aveva qualcosa del genere, ma non credo che lo supportino più.


La barra di scorrimento di Webkit non supporta la maggior parte dei browser.

Supporti su CHROME

Ecco una demo per la barra di scorrimento di Webkit Webkit Scrollbar DEMO

Se stai cercando altri esempi, controlla questo altri esempi

Un altro metodo è Jquery Scroll Bar Plugin

Supporta tutti i browser e facile da applicare

Scarica il plugin da Scarica qui

Come usare e per più opzioni CONTROLLA QUESTO

DEMO


Ho pensato che sarebbe stato utile consolidare le ultime informazioni sulle barre di scorrimento, i CSS e la compatibilità del browser.

Barra di scorrimento Supporto CSS

Attualmente non esiste alcuna barra di scorrimento cross-browser per le definizioni di stili CSS. L'articolo del W3C che menziono alla fine ha la seguente dichiarazione ed è stato aggiornato di recente (Ven 10 Ott 2014 03:09:48 PM CEST):

Alcuni browser (IE, Konqueror) supportano le proprietà non standard 'scrollbar-shadow-color', 'scrollbar-track-color' e altri. Queste proprietà sono illegali: non sono né definite in alcuna specifica CSS né sono contrassegnate come proprietarie (con il prefisso "-vendor-")

Microsoft

Come altri hanno già menzionato, Microsoft supporta lo stile della barra di scorrimento ( example ) ma, solo per IE8 e versioni successive.

Chrome e Safari (WebKit)

Allo stesso modo, WebKit ora ha una sua versione:

Firefox (Gecko)

Firefox non ha una propria versione degli stili della barra di scorrimento in base a questa risposta SO da Custom CSS Scrollbar per Firefox .

Non esiste Gecko equivalente a ::-webkit-scrollbar e amici.

Dovrai rimanere con jQuery.

Un sacco di gente vorrebbe questa funzione, vedi:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Questo rapporto chiede esattamente la stessa cosa che stai chiedendo: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Stile barra di scorrimento cross-browser

Librerie e plug-in JavaScript possono fornire una soluzione cross-browser. Ci sono molte opzioni

L'elenco potrebbe continuare. La soluzione migliore è cercare, ricercare e testare le soluzioni disponibili. Sono sicuro che sarai in grado di trovare qualcosa che soddisfi le tue esigenze.

Prevenire lo stile di barra di scorrimento illegale

Nel caso in cui si desideri evitare che lo stile della barra di scorrimento non sia stato preceduto correttamente da "-vendor", questo articolo sopra al W3C fornisce alcune istruzioni di base . Fondamentalmente, dovrai aggiungere il seguente CSS a un foglio di stile utente associato al tuo browser. Queste definizioni sostituiranno lo stile della barra di scorrimento non valido su qualsiasi pagina visitata.

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

Domande duplicate o simili / Fonte non collegata sopra

Nota: questa risposta contiene informazioni da varie fonti. Se è stata usata una fonte, allora è anche collegata in questa risposta.


Ecco un esempio di webkit che funziona per Chrome e 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;
}

Produzione:


Come molte persone, stavo cercando qualcosa che fosse:

  • Stile e funzionalità coerenti nella maggior parte dei browser moderni
  • Non una ridicola estensione jQuery da 3000 righe gonfiabile cr * p

... Ma ahimè - niente!

Beh, se vale la pena fare un lavoro ... Sono riuscito a mettere in piedi qualcosa in circa 30 minuti. Disclaimer: ci sono alcuni problemi noti (e probabilmente alcuni ancora sconosciuti) con esso, ma mi chiedo che cosa ci siano in Terra le altre 2920 linee di JS in molte offerte!

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>


Ho provato un sacco di scroll JS e CSS e ho trovato che era molto facile da usare e testato su IE e Safari e FF e ha funzionato bene

AS suggerisce @thebluefox

Ecco come funziona

Aggiungi lo script qui sotto al

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

E questo qui nel paragrafo in cui è necessario scorrere

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

Per maggiori dettagli visita la pagina del plugin

FaceScroll Barra di scorrimento personalizzata

spero che sia d'aiuto


Si prega di controllare questo link. Esempio con demo funzionante

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

Barre di scorrimento CSS





scrollbar