Scrollbars - ArchCSS

Global WebKit styling

When $enable_webkit: true (the default), every scrollable element on the page automatically gets a slim, rounded, $primary-colored thumb - no class required. It darkens on hover and while dragging.

Preview - scroll inside the box

Line one of scrollable content.

Line two of scrollable content.

Line three of scrollable content.

Line four of scrollable content.

Line five of scrollable content.

Config key	Default	Description
`webkit-scrollbar.width`	`5px`	Scrollbar track width
`webkit-scrollbar.height`	`0px`	Scrollbar track height (horizontal)
`webkit-scrollbar.background-color`	`rgba($secondary, .75)`	Track background
`scrollbar-thumb.hover-color`	10% darker `$primary`	Thumb color while hovering
`scrollbar-thumb.active-color`	10% darker `$primary`	Thumb color while dragging

Forcing scroll

Use .scroll, .scroll-x, or .scroll-y to force a scrollbar to always render, regardless of whether the content overflows.

<div class="scroll-y" style="height:200px">...</div>
<div class="scroll-x">...</div>

Class	CSS
`.scroll`	`overflow: scroll`
`.scroll-x`	`overflow-x: scroll`
`.scroll-y`	`overflow-y: scroll`

Scrollbar thumb width

Fine-tune the WebKit scrollbar width per-element with .scrollbar-{1-5} (pixel widths 1px–5px).

<div class="scroll-y scrollbar-2" style="height:200px">
  Thin 2px scrollbar
</div>

WebKit only. Both the global thumb styling and the .scrollbar-{n} width utilities rely on the non-standard ::-webkit-scrollbar pseudo-element - they have no effect in Firefox. Set $enable_webkit: false to omit this CSS entirely.