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><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;
}
html {
overflow-y: scroll;
}
Also see
scrollbar-gutter
(not yet supported in
Safari
as of May 2024)