Overflow scrolling with scroll bars #89

Phase 9: Advanced Layout#

Implement scrollable overflow regions with rendered scroll bars for overflow: scroll and overflow: auto.

Dependencies#

• Overflow clipping must be implemented first
• Event handling infrastructure already exists (mouse events, resize)

Current State#

• overflow: scroll and overflow: auto are parsed but only clip content (once overflow clipping is implemented)
• No scroll offset tracking
• No scroll bar rendering
• No mouse wheel event handling for scroll

Requirements#

1. Content overflow detection: Track when content dimensions exceed the box's padding area
2. Scroll offset tracking: Each scrollable box maintains a (scroll_x, scroll_y) offset
3. Scroll bar rendering:
   • Vertical scroll bar on the right edge when content overflows vertically
   • Horizontal scroll bar on the bottom edge when content overflows horizontally
   • Scroll bar track and thumb (proportional to content/viewport ratio)
   • overflow: scroll always shows scroll bars; overflow: auto shows only when content overflows
4. Scroll bar interaction:
   • Mouse wheel events adjust scroll offset
   • Click-and-drag on scroll bar thumb
   • Click on scroll bar track for page-up/page-down
5. Scroll offset applied during rendering: Shift child content by the scroll offset when painting within a scrollable container
6. Scroll bar dimensions: Reduce available content width/height by scroll bar thickness (typically 15px)

Files to Modify#

• crates/layout/src/lib.rs — Track content overflow, reserve space for scroll bars
• crates/render/src/lib.rs — Render scroll bars, apply scroll offset to child painting
• crates/browser/src/main.rs — Handle mouse wheel events, update scroll state
• crates/platform/src/appkit.rs — Forward scroll wheel events if not already handled

Tests#

• overflow: scroll renders scroll bars even when content fits
• overflow: auto renders scroll bars only when content overflows
• Scroll offset correctly shifts rendered content
• Scroll bar thumb size is proportional to content/viewport ratio
• Content is clipped at the scroll container boundary

Acceptance Criteria#

• overflow: scroll and overflow: auto show functional scroll bars
• Mouse wheel scrolling works
• Scroll bar rendering is correct (track + proportional thumb)
• Content shifts correctly with scroll offset
• All tests pass, clippy clean, fmt clean