Scrolling senza scrollbar

Inizio con il dire che il codice non è vantaggioso per chi naviga senza mouse, o si connette con i cellulari.
Si tratta di un semplice trucchetto, che ho ingegnato per "levare" la scrollbar che in certi casi può risultare graficamente fastidiosa. La grande fortuna è che funziona con tutti i browser.

Prima l'esempio (100x100), con la scrollbar visibile:

a
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
a
b
a
b
a
b
a
b
a
b

senza scrollbar:

a
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
a
b
a
b
a
b
a
b
a
b

Il trucco sta nell'inserire il piano del testo di larghezza X con scrollbar, dentro un piano che ha 17px di larghezza in meno e che, in quanto tale, nasconde la scrollbar (che è appunto larga 17px).

In pratica, partendo dal piano (div) del testo con scroll:

HTML

<div style="overflow-y: scroll; width: 100px; height: 100px">a
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
a
b
a
b
a
b
a
b
a
b</div>

che è alto 100px e largo 100px, devo aggiungere 17px di larghezza, quindi:

HTML

<div style="overflow-y: scroll; width: 117px; height: 100px">a
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
a
b
a
b
a
b
a
b
a
b</div>

e inserirlo a sua volta dentro un piano che misura la larghezza di partenza (cioè 100px) e che nasconde il contenuto che supera la capienza:

HTML

<div style="overflow: hidden; width: 100px"><div style="overflow-y: scroll; width: 117px; height: 100px; padding-right: 25px">a
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
a
b
a
b
a
b
a
b
a
b</div></div>

inoltre è consigliato aggiungere del padding a sinistra (padding-right) per evitare di far vedere la scrollbar nel caso un utente rimpicciolisca la pagina con lo zoom:

HTML

Trick a cura di .|Ye|. in esclusiva per lo Skinfactory.

Edited by .|Ye|. - 8/11/2011, 19:23

9 replies since 8/11/2011, 18:41 5903 views

Scrolling senza scrollbar[ Html ] Utile se vuoi levare la scrollbar, mantenendo il suo effetto di scrolling con la rotellina.

Scrolling senza scrollbar