A görgetősávok egyike azoknak a kezelőfelület-összetevőknek, amelyek az internet szinte minden oldalán megtalálhatók, ennek ellenére mi (fejlesztők) alig vagy egyáltalán nem tudjuk ellenőrizni. Néhány böngésző lehetővé teszi számunkra a megjelenés testreszabását, de a legtöbb böngészőnél, beleértve a Firefoxot sem, ez egyszerűen nem lehetséges.
Néhány frissítés és szabványosítás történt a gördítősávok stílusában. Lásd a Styling gördítősávok jelenlegi állapota a legfrissebb információkat, amelyeket egy mixinbe portálhat.
Ennek ellenére a Chrome és az Internet Explorer (igen) lehetővé teszi számunkra, hogy egyedi stílusokat definiáljunk a gördítősávokhoz. A szintaxis azonban borzasztóan összetett, és természetesen határozottan nem szabványos. Üdvözöljük a saját világban. Ezért érdemes egy kis mixet használni a gördítősávok egyszerű testreszabásához. Jobb?
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) ( // For Google Chrome &::-webkit-scrollbar ( width: $size; height: $size; ) &::-webkit-scrollbar-thumb ( background: $foreground-color; ) &::-webkit-scrollbar-track ( background: $background-color; ) // For Internet Explorer & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )Használat:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Példa
Hugo Giraudel (@HugoGiraudel) görgetősávjának stílusához lásd a Pen Sass keverőt a CodePen-en.
Tovább megyek
Mindkét böngészőben sokkal több lehetőség áll rendelkezésre, nemcsak a szín és a méret. Azonban gyakran figyelmen kívül hagyják őket, ezért nem hiszem, hogy érdemes túlzsúfolni a mixint ezekkel a lehetőségekkel. Nyugodtan készítsen fejlettebb mixint extra lehetőségekkel.
További olvasmányok:
- Beépített és testreszabott WebKit gördítősáv
- Egyéni gördítősávok a Webkitben
- Egyéni gördítősávok az IE és a Chrome számára CSS használatával