Rules Hub
Code Ruleset
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP2stack specificStack: css
csscross-browserscrollbar
Hide scrollbars with cross-browser CSS
Use supported standard and necessary vendor scrollbar styling for the actual browser baseline, with an alternative overflow affordance.
PR: hegnar-forum-web · org-mining-hist-2026-06Created: Jun 20, 2026
Bad example
Old codecss
| 1 | .scroller { |
| 2 | overflow-y: auto; |
| 3 | &::-webkit-scrollbar { display: none; } |
| 4 | } |
Explanation (EN)
One vendor-only rule can leave inconsistent scrollbar presentation on other supported engines.
Objašnjenje (HR)
Good example
New codecss
| 1 | .scroller { |
| 2 | overflow-y: auto; |
| 3 | scrollbar-width: none; /* Firefox */ |
| 4 | &::-webkit-scrollbar { display: none; } |
| 5 | } |
Explanation (EN)
Objašnjenje (HR)
Notes (EN)
When the design intentionally hides a scrollbar, use the supported scrollbar styling for the actual browser baseline and preserve scrolling plus an alternative overflow cue.
Exceptions / Tradeoffs (EN)
scrollbar-width is standardized and is not exclusively Firefox-specific. Vendor pseudo-elements are fallbacks for particular engines, not a guarantee of every-browser behavior.