Izdelovanje spletnih strani, aplikacij, widgetov, … včasih zahteva, da moramo zaradi informacij ali oblikovanja skriti scrollbar, kljub temu pa obdržati scrollanje. Sicer lahko ta efekt dosežemo s pomočjo JavaScripta, vendar so CSS rešitve boljše.

Skrivanje scrollbarja lahko izhaja iz funkcionalnih ali pa zaradi oblikovalskih razlogov. To lahko dosežemo na različne načine, vsak pa ima svoje specifike. Običajno se uporabljajo tehnike, ki omogočajo:

• skrivanje scrollbarja, vendar omogočajo scrollanje,
• skrivanje scrollbarja, onemogočeno scrollanje,
• skrivanje scrollbarja, dokler ga ne potrebujemo.

Spodaj je primer kode, ki uporablja novejše CSS tehnike, ki omogočajo skrivanje scrollbarja in omogočajo scrollanje. Žal je potrebno za ta efekt uporabiti še nekaj CSS značk, ki so namenjene določenim brskalnikom.

elementKiGaCiljamo {
-ms-overflow-style: none; /* za Internet Explorer, Edge */
scrollbar-width: none; /* za Firefox */
overflow-y: scroll;
}

elementKiGaCiljamo::-webkit-scrollbar {
display: none; /* za Chrome, Safari, and Opera */
}

 

See the Pen
Kako skrijemo scrollbar by Ziga (@pomagalnik)
on CodePen.

Pri skrivanju scrollbarja imejte v mislih, da je slednji prikazan z razlogom. Možnost, da lahko slednjega skrijemo še ne pomeni, da moramo to vedno storiti. Veliko uporabnikov uporablja scrollbar za navigiranje, èe ga želite odstranite bodite prepričani, da to pripomore k vašemu oblikovanju/uporabniški izkušnji.