CSS Scrollbar

Sembrerà banale ma non è così nella vita di un programmatore web frontend arriva il momento in cui ci si imbatte nella gestione di un elemento che ha altezza fissa ma tale contenitore deve scrollare, se stiamo disegnando layout semplici basterà mettere una height/width fissa ed un overflow scroll ed il gioco è fatto, magari i più temerari aggiungeranno le personalizzazioni della webkit scrollbar.

container{
	overflow-y: auto;
	overflow-x: hidden;
}
container::-webkit-scrollbar{
	-webkit-overflow-scrolling: auto;
	width: 8px;
}
container::-webkit-scrollbar-thumb{
	border-radius: 4px;
    background-color: rgba(0,0,0,1);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

CSS Scrollbar - SimpleBar

Gestione delle scrollbar


Fatto sta che non sarà la soluzione ottimale a causa del fatto che non è supportata da Internet Explorer ad esempio, oltre al fatto che la barra di default del browser non è molto carina da visualizzare allora si inizia a semplificare il problema demandando il problema ad una libreria esterna.
E quì si pensa va beh ma una libreria vale l’altra tanto che ci dovrò mai fare con una scrollbar?! E’ quì puntualmente nascerà l’errore perchè il funzionamento di tali librerie non è sempre uguale, ne ho studiate due abbastanza dettagliatamente e vi dimostrerò che non sono affatto simili 😉
1. JSCROLLPANE
Partiamo con la prima che ho studiato JScrollPane, supponiamo di lavorare in JavaScript.
La sua inizializzazione è molto semplice basta chiamare il metodo jScrollPane su un contenitore e abbiamo una scrollbar.

$('.scroll-pane').jScrollPane();

Sembra tutto facile e bello ma non lo è affatto 🙂 Supponiamo di effettuare un resize del browser, l’altezza della scrollpane rimane quella precedente, bella fregatura, allora i geni di JScrollPane hanno pensato che si può agire in due modi o inserisci un autoreinitialise temporizzato ogni tot millisecondi oppure distruggi e ricrei la tua scrollbar.
Ora mettere un autoreintilise di JavaScript ogni tot millisecondi spaccherà la tua pagina web specialmente se su mobile perchè trigghera un relayout di un contenitore impiegando risorse computazionali e rallenterà l’applicazione supponendo di averne una per pagina ma se ne abbiamo già 10 la pagina ‘Uffa’ di Chrome è dietro l’angolo 🙂 Allora il programmatore temerario inizierà a trappare gli eventi che secondo lui devono ridisegnare la scrollbar allora farà questo codice JavaScript

if($('.scroll-pane').data('jsp')) {
     $('.scroll-pane').data('jsp').destroy();
     $('.scroll-pane').jScrollPane();
}

Va bene bravo un applauso al temerario 🙂 ma comunque non ha risolto il problema in maniera atomica, perché ora il suo capo gli dice ma il testo dentro questa scrollbar è tutto attaccato inserisci un pò di padding a destra, bene lui esegue l’ordine e tac tutto rotto 🙂 Perchè di punto in bianco appare anche la scrollbar orizzontale che lui non voleva visualizzare, che fare che fare inizia a testare una serie di workaround per questo padding ma gira che ti rigira non la troverà in maniera atomica per tutti i devices perché il problema risiede proprio nella natura di come è stato pensato questo plugin ossia l’idea di JScrollPane è quella di prendere il contenitore che desidera scrollare staccarlo dal DOM calcolarne l’altezza e la larghezza e poi ri-effettuare nuovamente l’attach di tale elemento al DOM ed inserire una scroll verticale/orizzontale che scrolla scolpendo nel codice inline del contenitore una height fissa, conclusione ciò ignora il padding 😉
Però il team di jscrollpane non è stupido tutt’altro sono consapevoli di tale bug però lo aggirano prelevando il padding prima di fare il magheggio e poi lo sommano alla width/height a seconda di dove deve scrollare.
Bravi tentativo nobile ma non basta per applicazioni dove il design è tutto perché ciò fallirà sempre se del contenitore che si desidera far scrollare non si conosce l’altezza 🙂 Voi vi chiederete ma come è possibile non conoscere tale parametro eppure vi assicuro che è possibile perché potrei scegliere di voler gestire un box di testo con un layout flexbox (https://www.gianlucadivincenzo.it/css/css-flexbox/). Ma inoltre soprattutto quanti trick e quanto javascript per una scrollbar mi farà passar la voglia di programmare per davvero!!

2. SIMPLEBAR
Un giorno però questo sviluppatore viene a conoscenza di simplebar.js 🙂 Simplebar JS non definisce una custom scrollbar ma usa quella del browser! Cosa ma allora farà cagare visivamente ed invece no perché usa quella del browser che la nasconde con margin e padding, spieghiamoci meglio, ma arriviamoci per gradi 🙂
Per inizializzare una scrollbar con simplebar fa tutto il nostro plugin basta aggiungere un data-simplebar come attributo dell’elemento scrollabile, già è tutto semplice, però che fa a differenza di JScrollPane non effettua il detach e il nuovo append sul DOM triggherando relayout ecc… ma andiamo con calma analizziamo la scrollbar verticale.
Sul suo figlio diretto aggiunge un padding right positivo e sul suo ulteriore figlio un margin right degli stessi pixel ma negativo, ciò nasconde la scrollbar del browser e la ridisegna con la sola imposizione del css rendendo visibile un div nascosto che al suo interno ha un :before che possiede la scrollbar posizionata in position absolute ovviamante sulla sinistra del DIV contenitore. Fantastico, perchè se modifichiamo a mano il padding right di cui vi parlavo su vedremo apparire magicamente la scrollbar base del browser sottostante al :before posizionato in maniera assoluta sulla sinistra 🙂
In poche parole SimpleBar fa solo una cosa: sostituisce le barre di scorrimento predefinite del browser con una barra di scorrimento in stile CSS personalizzata senza sacrificare le prestazioni. A differenza della maggior parte degli altri plugin, SimpleBar non imita il comportamento di scorrimento con Javascript, non a caso lo scrolling di Jscrollpane va a scatti e necessita dell’utilizzo di un altro plugin connesso che è MouseWheel. Mantiene inoltre la bellezza dello scorrimento nativo… con una barra di scorrimento personalizzata e facile a sua volta da customizzare ulteriormente! Non basta perché è compatibile con tutti i browser essendo la scrollbar nativa del browser, ma questo plugin non finisce di stupirci e lo dimostrerà proprio sul problema del flexbox perchè si comporta proprio come il browser aggiunge solo css ed il CSS ci piace rispetto a fare righe su righe di JavaScript, può capitare che però anche lui fallisca visualizzando le scrollbar quando non occorrono però quì a differenza di jscrollpane non triggheriamo un relayout della finestra ma dobbiamo semplicemente re-inizializzarla ridisegnando padding e margin perché per un dato problema come il resize/lo zoom della pagina il contenitore ha modificato la sua altezza/larghezza allora semplice selezioniamo tale elemento e faremo l’unica riga di JavaScript del plugin.

   var a = new SimpleBar($('#myElement')[0]);
a.recalculate();

CSS Scrollbar ultima modidfica: 2018-10-29T22:48:36+01:00 da Gianluca Di Vincenzo
Posted in: CSS

By on 29 Ottobre 2018

Tagged: , , , , , ,