RetroScrollbar Preview
Vertical Scroll
Welcome to Macintosh
This window demonstrates the classic Mac OS 9 scrollbar with raised bevel thumb, arrow navigation buttons, and an inset beveled track.
System 7 introduced the Platinum appearance, which was refined through Mac OS 8 and reached its final form in Mac OS 9. The scrollbar is one of the most recognizable elements of the classic Mac interface.
Key features of the OS 9 scrollbar include 16-pixel-wide tracks, raised bevel thumb indicators, and navigation arrow buttons at both ends of the track.
The thumb uses a light highlight on the top and left edges with a darker shadow on the bottom and right edges, creating the signature 3D raised appearance.
When pressed, the bevel inverts: the highlight moves to the bottom-right and the shadow to the top-left, giving tactile feedback.
The track background uses a subtle pattern to distinguish the scrollable gutter from the rest of the window chrome.
Arrow buttons sit at each end of the scrollbar, each a 16x16 pixel square with its own raised bevel and a centered triangular arrow glyph.
This implementation is built on top of Radix UI ScrollArea for accessible, cross-browser scroll behavior while faithfully reproducing the Mac OS 9 visual style.
Nostalgic yet functional - these scrollbars bring the warmth of late-90s desktop computing to modern web applications.
Try scrolling to see the thumb move along the track. Resize the container to watch it adapt.
Horizontal Scroll
Both Directions
Large Content Area
Line 1: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 2: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 3: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 4: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 5: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 6: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 7: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 8: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 9: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 10: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 11: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 12: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 13: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 14: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 15: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 16: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 17: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 18: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 19: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Line 20: This line is intentionally wide to demonstrate horizontal scrolling alongside vertical scrolling in the classic Mac OS 9 style.
Scroll areas use Radix UI ScrollArea with OS 9 styled scrollbars, arrow buttons, and beveled thumb.