dragontheory/Drop‑in-CSS-scrollbars-on-hover.md

## Drop‑in-CSS-scrollbars-on-hover.md

      
    Raw
  

              Drop‑in-CSS-scrollbars-on-hover.md
            
          
Short, practical drop‑in CSS snippets that hide scrollbars by default and show them on hover, suitable to integrate with design/theme tokens (e.g., CSS custom properties). Useful patterns leverage standard CSS Scrollbars Module + fallback WebKit pseudo‑elements. Authoritative specs/tools cited. (MDN Web Docs)

1) Modern + fallback: show scrollbars on hover

/* theme tokens */
:root {
  --scrollbar-thumb: hsl(210 15% 40%);
  --scrollbar-track: hsl(210 15% 95%);
  --scrollbar-width: 8px;
}

/* base scrollable container */
.scroller {
  overflow: auto;
  scrollbar-width: none;       /* hide in Firefox */
  scrollbar-color: transparent transparent; /* hide colors until hover */
}

/* standard (Firefox, future browsers) */
.scroller:hover {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* WebKit fallback */
.scroller::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}
.scroller::-webkit-scrollbar-track,
.scroller::-webkit-scrollbar-thumb {
  background: transparent;
  transition: background .2s ease;
}
.scroller:hover::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.scroller:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}
Notes:
• scrollbar-width and scrollbar-color are from the CSS Scrollbars Module Level 1. (MDN Web Docs)
• WebKit pseudo‑elements provide fallback for Chromium/Safari. (Chrome for Developers)

2) Hide until hover using visibility

This uses visibility instead of color to ensure scrollbars don’t take visual space until hovered.
.scroller::-webkit-scrollbar,
.scroller::-webkit-scrollbar-thumb {
  visibility: hidden;
}
.scroller:hover::-webkit-scrollbar,
.scroller:hover::-webkit-scrollbar-thumb {
  visibility: visible;
}
Works specifically in WebKit‑based browsers (Chrome/Safari). (Obsidian Forum)

3) Prefer stable layout with gutter

To avoid layout shift when scrollbar appears, reserve space in advance:
.scroller {
  scrollbar-gutter: stable both‑edges;
  overflow: auto;
}
This uses the scrollbar‑gutter property (supported in modern Chromium). (Ishaadeed)

4) CSS‑only UX‑friendly hint scrollbars

If you want indicators rather than full scrollbars until hover:
.scroller {
  position: relative;
}
.scroller::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 4px;
  background: var(--scrollbar-thumb);
  opacity: 0;
  transition: opacity .3s;
}
.scroller:hover::after {
  opacity: 1;
}
This suggests scrollability without native scrollbars. (Works across all browsers.)

Practical integration tips


Use theme tokens (--scrollbar-*) so colors/size adapt globally.
Avoid hiding scrollbars entirely without visual affordance — accessibility suffers.
Native scrollbar behavior (e.g., macOS auto‑hiding) still applies. (CSS-Tricks)


If you want a zero‑JavaScript, fully accessible UX pattern that uses CSS only for scroll cues and hover‑only scrollbars, these snippets can be dropped straight into your theme or component styles.
No results found