Fylgja component - Scrollbar
Table of Contents
Customize or hide the scrollbar with ease.
npm install @fylgja/scrollbar
Then include the component in to your code via;
// Or via PostCSS import
If you need support for
@layer, use the following import;
@use "@fylgja/scrollbar" with ($scrollbar-layer: "utilities");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/scrollbar" layer("utilities");
How to use
@fylgja/scrollbar offers 2 scrollbar styles.
Both are based on the browser default styles thats is supported by Firefox.
Giving a close cross browser support to the scrollbar style.
Apply the scrollbar style to any element that has overflow and so has a scrollbar.
...overflowing content here
Cross browser support
Currently the scrollbar styles are split in the newer specification that is only supported by Firefox.
And the webkit version that is supported by all moderne browsers except Firefox.
This CSS component mimics the newer spec with the webkit version.
And so limits the possibilities found in the webkit version.
Making this CSS component as safe solution for a near cross browser style, with minor OS differences.
Mixin (SCSS only)
This CSS component also ships with a handy SCSS mixin that you can use via;
@use "@fylgja/scrollbar/helper" as *;
$thumb, // thumb color
$track, // track color
$width: null, // width of the scrollbar
$radius: 0.5rem // border radius of the scrollbar, webkit only
$width-size: if($width, ..) // $width setters for the older spec
$width-name: if($width, ..) // $width setters for the newer spec
This mixin will create a near cross browser scrollbar.
0.5remis the radius found in most OS scrollbars
Want more control on the base styles, than the CSS variables, Here are the following SCSS variables you can modify.
$scrollbar-thumb-color: rgba($root-fg, 25%) !default;
$scrollbar-track-color: rgba($root-fg, 0%) !default;