Creare una scroll bar

Se avete spesso articoli molto lunghi l’ideale sarebbe quello di creare una scroll bar che visualizzi quanto manca alla conclusione dell’articolo o della pagina.

ATTENZIONE! Se state usando un tema di WordPress, potrebbero esserci dei problemi perché alcuni template come NEVE, quello in questo blog, bloccano di base la funzione utilizzata nel codice, perché fanno pagare per avere funzioni avanzate sul sito.

Partendo dall’idea che stiate lavorando su un template creato da voi, dovrete utilizzare il codice inserito qui.

Scroll bar in HTML

Iniziamo ad inserire il codice nel body:

<!-- Scroll bar -->
<div class="scroll">
			  
  <div class="progress-container">
	<div class="progress-bar" id="myBar"></div>
  </div>
</div>
<!-- end Scroll bar -->

Qui viene inserito un div che contenga la scroll bar e un div che imposti la progressione della pagina (id=”myBar”).

Scroll bar in CSS

Poi inseriamo il codice CSS.

<style>
/* SCROLL BAR */
  /* Style the scroll: fixed position (always stay at the top) */
	.scroll {
	  position: fixed;
	  top: 0;
	  z-index: 1;
	  width: 100%;
	  background-color: #f1f1f1;
	}

/* The progress container (grey background) */
	.progress-container {
	  width: 100%;
	  height: 8px;
	  background: #ccc;
	}

/* The progress bar (scroll indicator) */
	.progress-bar {
	  height: 8px;
	  background: #005190;
	  width: 0%;
	}
		  
</style>

Dobbiamo impostare una posizione fissa, perché altrimenti scrollando non vedrà più visualizzato, uno z-index che posizioni la nostra scroll bar sopra tutto, la larghezza a tutta pagina e successivamente ne progress-container anche un’altezza ed un colore di sfondo.

Poi nel progress-bar impostiamo un colore di sfondo che sia nettamente in contrasto con lo sfondo e risalti anche nella pagina. Qui è importante che mettiamo una larghezza 0% perché poi con il codice di Programmazione andremo a modificare quella larghezza in base allo scroll della pagina.

Scroll bar in Javascript

Ora impostiamo lo script. Dobbiamo decidere se metterlo nel tag head o in fondo al codice, prima della chiusura del body, per accelerare la velocità del sito.

<script>
//	SCROLL BAR 
window.onscroll = function() {scrollBar()};

function scrollBar() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

Buon divertimento!

CONSIGLIO DI UX DESIGN
Questa è una funzione che potrà essere richiamata anche in altre parti della pagina volendo, l’ideale comunque è impostare la scroll bar solo in alto alla pagina, o se il template lo permette anche sul fondo del browser.