-
.|Ye|.+2
.User deleted
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:
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<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>
Trick a cura di .|Ye|. in esclusiva per lo Skinfactory.
Edited by .|Ye|. - 8/11/2011, 19:23
. -
Jobs' .
User deleted
e per la tag board ?? . -
.
Grande Ye^^ . -
ëlvereth .
User deleted
grazieeeeeee *_* . -
Franklin' .
User deleted
Era tantissimo che lo cercavo *-------*
Grazie mille!. -
Drew. .
User deleted
bel trucchetto 
. -
.|Ye|.+1 .
User deleted
nel nuovo layout basta sfruttare come piano contenitore .tag .mainbg e come piano scrollato .tag .list, per esempio:CODICE.tag .mainbg {width: 800px; overflow: hidden}
.tag .list {width: 817px; padding-right: 25px}
nel vecchio layout invece basta sfruttare come piano contenitore .tag .mainbg e come piano scrollato .tag ol, per esempio:CODICE.tag .mainbg {width: 800px; overflow: hidden}
.tag ol {width: 817px; padding-right: 25px}
spero di essere stato chiaro
. -
.
se posso permettermi si può anche fare così senza fare il trucco dei pixel in html ma direttamente in css CODICE*::-webkit-scrollbar {width: 0; -webkit-appearance: none}
*::-webkit-scrollbar-track-piece {background: none) !important}
*::-webkit-scrollbar-thumb {background: none}
*::-webkit-scrollbar-thumb:active {background: none}SPOILER (clicca per visualizzare)se poi si vuole un solo scroll, (esempio) solo quello della tag basta mette .tag al posto di * e si risolve il tutto
Edited by Mikoto Suoh - 15/11/2013, 17:10. -
.
Il codice è compatibile con ogni browser? . -
.
non ho provato con tutti i browser ma posso dire che con chrome e la volpe funziona .
Scrolling senza scrollbar[ Html ] Utile se vuoi levare la scrollbar, mantenendo il suo effetto di scrolling con la rotellina. |
Web
