Scrollbar
Bifrost-styled scrollbar
Global scrollbar colors
When including the bifrost CSS, we globally apply bifrost scrollbar colors for
supporting browsers. For most browsers you will no longer need the CSS classes
below, except if you want the thin version, use .bf-scrollbar-small.
.bf-scrollbar css class
The class .bf-scrollbar applies webkit-prefixed styling (only applied in
Safari at time of writing) to any element that has a scrollbar. To apply the
styling to the default browser scrollbar, you can either:
- Add it in your
public/index.htmlwith<body class='bf-scrollbar'> - Call
document.body.classList.add('bf-scrollbar')on app load in JS
For a thinner scrollbar use .bf-scrollbar-small instead, which both applies
scrollbar-width: thin and styles webkit-only scrollbars slightly smaller.
Mobile devices have varying degrees of support, issues with, and need for
scrollbar styling, so our webkit-prefixed CSS is only applied for screens wider
(or taller) than 600px.
For users without
prefers-reduced-motion
we also apply
scroll-behavior: smooth.
HTML example
<div class="bf-scrollbar" style="overflow: auto; max-height: 200px">
<p><code>.bf-scrollbar</code></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius vitae
felis a sagittis. Suspendisse enim arcu, rhoncus vitae elit vitae, accumsan
auctor ligula. Aenean varius, nibh in facilisis faucibus, urna justo
sollicitudin quam, nec volutpat ligula nulla ut dolor. Vivamus vitae semper
metus, ut gravida nisi. Proin a eros ut risus ultricies sodales. Suspendisse
ornare lorem vel velit rhoncus aliquet. Aenean ipsum sapien, elementum quis
lacinia id, pellentesque ut sapien. Mauris vitae nisi eget enim aliquam
congue.
</p>
</div>
<div class="bf-scrollbar-small" style="overflow: auto; max-height: 200px">
<p>
<code>.bf-scrollbar-small</code>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius vitae
felis a sagittis. Suspendisse enim arcu, rhoncus vitae elit vitae, accumsan
auctor ligula. Aenean varius, nibh in facilisis faucibus, urna justo
sollicitudin quam, nec volutpat ligula nulla ut dolor. Vivamus vitae semper
metus, ut gravida nisi. Proin a eros ut risus ultricies sodales. Suspendisse
ornare lorem vel velit rhoncus aliquet. Aenean ipsum sapien, elementum quis
lacinia id, pellentesque ut sapien. Mauris vitae nisi eget enim aliquam
congue.
</p>
</div>
<div style="overflow: auto; max-height: 200px">
<p>Native scrollbar for comparison</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius vitae
felis a sagittis. Suspendisse enim arcu, rhoncus vitae elit vitae, accumsan
auctor ligula. Aenean varius, nibh in facilisis faucibus, urna justo
sollicitudin quam, nec volutpat ligula nulla ut dolor. Vivamus vitae semper
metus, ut gravida nisi. Proin a eros ut risus ultricies sodales. Suspendisse
ornare lorem vel velit rhoncus aliquet. Aenean ipsum sapien, elementum quis
lacinia id, pellentesque ut sapien. Mauris vitae nisi eget enim aliquam
congue.
</p>
</div>Permanent scrollbar
For pages with dynamic content (whether or not you use bifrost-styled scrollbar), the scrollbar will only appear when the content is taller than the viewport, which can result in a slight "jump" when the scrollbar appears or disappears.
If this is an issue, you can make the main scrollbar render permanently with the following CSS;
html {
overflow-y: scroll;
}Also see
scrollbar-gutter
(not yet supported in
Safari
as of May 2024)