Fabric: Stop ScrollView from scrolling past content (#10652)

* Fabric: Stop ScrollView from scrolling past content * Change files
microsoft · Sep 29, 2022 · e3b38c1 · e3b38c1
1 parent 19110d7
commit e3b38c1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/change/react-native-windows-5ca2f093-d86c-4bab-9a50-4b6d722eefa4.json b/change/react-native-windows-5ca2f093-d86c-4bab-9a50-4b6d722eefa4.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fabric: Stop ScrollView from scrolling past content",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp
@@ -462,7 +462,9 @@ struct CompScrollerVisual : winrt::Microsoft::ReactNative::Composition::implemen
   }
 
   void Size(winrt::Windows::Foundation::Numerics::float2 const &size) noexcept {
+    m_visualSize = size;
     m_visual.Size(size);
+    UpdateMaxPosition();
   }
 
   void Offset(winrt::Windows::Foundation::Numerics::float3 const &offset) noexcept {
@@ -499,8 +501,9 @@ struct CompScrollerVisual : winrt::Microsoft::ReactNative::Composition::implemen
   }
 
   void ContentSize(winrt::Windows::Foundation::Numerics::float2 const &size) noexcept {
+    m_contentSize = size;
     m_contentVisual.Size(size);
-    m_interactionTracker.MaxPosition({size.x, size.y, 0});
+    UpdateMaxPosition();
   }
 
   winrt::Windows::Foundation::Numerics::float3 ScrollPosition() noexcept {
@@ -516,6 +519,15 @@ struct CompScrollerVisual : winrt::Microsoft::ReactNative::Composition::implemen
     m_scrollPositionChangedEvent(*this, winrt::make<CompScrollPositionChangedArgs>(position));
   }
 
+  void UpdateMaxPosition() {
+    m_interactionTracker.MaxPosition(
+        {std::max<float>(m_contentSize.x - m_visualSize.x, 0),
+         std::max<float>(m_contentSize.y - m_visualSize.y, 0),
+         0});
+  }
+
+  winrt::Windows::Foundation::Numerics::float2 m_contentSize{0};
+  winrt::Windows::Foundation::Numerics::float2 m_visualSize{0};
   winrt::event<
       winrt::Windows::Foundation::EventHandler<winrt::Microsoft::ReactNative::Composition::ScrollPositionChangedArgs>>
       m_scrollPositionChangedEvent;