[data grid] Experimental touch scroll lock

packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx

@@ -15,7 +15,13 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 
 type Position = 'vertical' | 'horizontal';
 type OwnerState = DataGridProcessedProps;
-type GridVirtualScrollbarProps = { position: Position };
+type GridVirtualScrollbarProps = {
+  position: Position;
+  scrollPosition: React.RefObject<{
+    left: number;
+    top: number;
+  }>;
+};
 
 const useUtilityClasses = (ownerState: OwnerState, position: Position) => {
   const { classes } = ownerState;
@@ -83,6 +89,7 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
 
     const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
     const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
+    const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
     const hasScroll = props.position === 'vertical' ? dimensions.hasScrollX : dimensions.hasScrollY;
 
     const contentSize =
@@ -97,31 +104,33 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
       scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
 
     const onScrollerScroll = useEventCallback(() => {
-      const scroller = apiRef.current.virtualScrollerRef.current!;
       const scrollbar = scrollbarRef.current;
+      const scrollPosition = props.scrollPosition.current;
+
       if (!scrollbar) {
         return;
       }
 
-      if (scroller[propertyScroll] === lastPosition.current) {
+      if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
         return;
       }
 
-      lastPosition.current = scroller[propertyScroll];
+      lastPosition.current = scrollPosition[propertyScrollPosition];
 
       if (isLocked.current) {
         isLocked.current = false;
         return;
       }
       isLocked.current = true;
 
-      const value = scroller[propertyScroll] / contentSize;
+      const value = scrollPosition[propertyScrollPosition] / contentSize;
       scrollbar[propertyScroll] = value * scrollbarInnerSize;
     });
 
     const onScrollbarScroll = useEventCallback(() => {
       const scroller = apiRef.current.virtualScrollerRef.current!;
       const scrollbar = scrollbarRef.current;
+
       if (!scrollbar) {
         return;
       }
@@ -139,12 +148,12 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
     useOnMount(() => {
       const scroller = apiRef.current.virtualScrollerRef.current!;
       const scrollbar = scrollbarRef.current!;
-      const options = { capture: true, passive: true };
+      const options = { passive: true };
       scroller.addEventListener('scroll', onScrollerScroll, options);
       scrollbar.addEventListener('scroll', onScrollbarScroll, options);
       return () => {
-        scroller.removeEventListener('scroll', onScrollerScroll, options);
-        scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
+        scroller.removeEventListener('scroll', onScrollerScroll, options as any);
+        scrollbar.removeEventListener('scroll', onScrollbarScroll, options as any);
       };
     });