Fix ScrollView infinite scroll bug by correcting boundary checks in Fabric implementation

[Copilot]

The ScrollView component in React Native Windows 0.80 preview 6 was exhibiting infinite scrolling behavior, where users could scroll indefinitely up and down even when content boundaries should have stopped the scrolling. This was a regression from the working behavior in 0.79.

Root Cause

The issue was in the boundary check logic within the Fabric ScrollView implementation (ScrollViewComponentView.cpp). Three methods had flawed boundary calculations:

• scrollDown()
• scrollRight()
• scrollToEnd()

The original problematic logic:

if (((m_contentSize.height - m_layoutMetrics.frame.size.height) * m_layoutMetrics.pointScaleFactor) -
        m_scrollVisual.ScrollPosition().y < 1.0f) {
  return false;
}

When m_contentSize.height was smaller than m_layoutMetrics.frame.size.height, the calculation (m_contentSize.height - m_layoutMetrics.frame.size.height) resulted in negative values. This made the boundary check unreliable, especially when scroll positions could also become negative, leading to incorrect boundary detection and infinite scrolling.

Solution

The fix implements a two-step boundary check approach:

1. Content size validation: First check if content actually exceeds the viewport size
2. Position boundary check: Then verify if we're already at the scroll boundary

// If content doesn't exceed frame size, no scrolling allowed
if (m_contentSize.height <= m_layoutMetrics.frame.size.height) {
  return false;
}

// Check if we're already at the bottom
float maxScrollY = (m_contentSize.height - m_layoutMetrics.frame.size.height) * m_layoutMetrics.pointScaleFactor;
if (m_scrollVisual.ScrollPosition().y >= maxScrollY - 1.0f) {
  return false;
}

Changes Made

• Fixed boundary logic in scrollDown() method
• Fixed boundary logic in scrollRight() method
• Enhanced scrollToEnd() method with comprehensive boundary checks
• Added #include <cmath> for std::abs usage
• Applied clang-format for consistent code style

Testing

The fix ensures proper behavior in these scenarios:

• Content smaller than viewport: No scrolling allowed (prevents infinite scroll)
• Content larger than viewport: Normal scrolling within boundaries
• At scroll boundaries: Scrolling stops appropriately
• Edge cases: Negative positions handled correctly

This restores the expected ScrollView behavior that worked correctly in React Native Windows 0.79.

Fixes #15171.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Microsoft Reviewers: Open in CodeFlow