canvas-ui icon indicating copy to clipboard operation
canvas-ui copied to clipboard

feat(ScrollView): conditional wheel event preventDefault for nested scrolling

Open myers opened this issue 2 months ago • 0 comments

Hello! 您好

This PR builds on the work in #35 (HeadlessCanvas). It depends on BridgeEventBinding from #32 for test infrastructure.

When scrolling through examples in storybook, it was annoying that when I scrolled while the pointer was over a canvas-ui element, it did nothing. This is the fix I came up with after digging into it.

This PR implements proper wheel event bubbling behavior in RenderScrollView to enable nested scrolling scenarios where parent scrollers can handle events when the inner scroller reaches its scroll bounds.

Changes:

  • RenderScrollView: only call preventDefault() when scroll actually occurs (when _setScrollOffset() returns true), allowing events to bubble to parent when at scroll bounds (top/bottom for vertical, left/right for horizontal)
  • DOMEventBinding: remove immediate preventDefault() on wheel events - let Canvas UI decide
  • SyntheticEventManager: conditionally call preventDefault() on native event only if a Canvas UI component handled it
  • Add 6 comprehensive integration tests covering preventDefault behavior at all scroll bounds and nested ScrollView scenarios

Tests verify:

  • preventDefault called when scrolling within bounds
  • preventDefault NOT called when at top/bottom/left/right bounds
  • Nested ScrollViews: inner at bounds allows outer to scroll

myers avatar Oct 28 '25 12:10 myers