Rules Hub
Coding Rules Library
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)
Hiding the scrollbar without any alternative cue leaves users with no indication the container scrolls or how much content remains.
Objašnjenje (HR)
Skrivanje scrollbara bez ikakvog drugog signala ostavlja korisnike bez naznake da se spremnik pomice ni koliko sadrzaja preostaje.
Good example
| 1 | .list { |
| 2 | overflow-x: auto; |
| 3 | @include hide-scrollbar; |
| 4 | // ensure the next item is partially visible, or add an arrow/fade |
| 5 | scroll-padding-inline-end: rem-calc(24); |
| 6 | } |
Explanation (EN)
A partially visible next item (or arrow/fade) signals that there is more to scroll even with the scrollbar hidden.
Objašnjenje (HR)
Djelomicno vidljiva sljedeca stavka (ili strelica/fade) signalizira da ima jos sadrzaja za pomicanje cak i kad je scrollbar skriven.