Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Pair hidden scrollbars with an overflow affordance
If you hide the scrollbar on a scrollable container, provide another cue that more content exists: a partially cut-off next item, a gradient/fade, or an arrow. A hidden scrollbar with no affordance removes the only signal that the region scrolls.
Bad example
| 1 | .list { |
| 2 | overflow-x: auto; |
| 3 | @include hide-scrollbar; // no other overflow cue |
| 4 | } |
Explanation (EN)
Removing the visible scrollbar can leave users unaware that more content exists.
Objašnjenje (HR)
Sakrivanje scrollbara može korisnicima prikriti da postoji dodatni sadržaj.
Good example
| 1 | <> |
| 2 | <div className={styles.carousel} ref={scrollRef} tabIndex={0}>{items}</div> |
| 3 | {hasMoreAtEnd && <button onClick={scrollForward} aria-label="Show more items">Next</button>} |
| 4 | </> |
Explanation (EN)
The actual overflow state controls a visible navigation affordance; the carousel remains keyboard/touch scrollable.
Objašnjenje (HR)
Stvarno prelijevanje određuje prikaz navigacijske kontrole; carousel ostaje pomičan tipkovnicom i dodirom.
Notes (EN)
When hiding a scrollbar on a region with hidden content, provide a real, tested continuation cue and maintain keyboard/touch access to that content.
Exceptions / Tradeoffs (EN)
scroll-padding alone does not reveal a partial item or draw a fade. Hide the cue when no content remains beyond the relevant edge and ensure controls do not intercept scrolling.