Logo of UI Challenges
Sign in
Wireframe example for Scroll bar
An example interpretation of the prompt
Icon of target

Scroll bar

Icon of book open

Design a scrollbar component for a desktop-style interface. Include both vertical and horizontal versions, since the same pattern should work in lists, tables, and canvases.

Show the full interaction set: default, hover, active drag, and disabled. Make the thumb readable at a glance, with a hit area large enough to grab even when the visual thumb is slim.

Decide whether the scrollbar is always visible, auto-hides, or expands on hover, then apply that behavior consistently. If you include arrow buttons, show when they appear and how they behave; if you omit them, the track and thumb still need to feel complete.

The result should make scrolling obvious without stealing attention from content. It should work on light and dark surfaces, and the state changes should be clear without relying on color alone.

Icon of book open

Embrace minimalism but don't sacrifice functionality; ensure your design is not only stylish but also easily usable on all devices.

Better at UI design with every challenge

Select complexity and generate challenge.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.