fix(drag-drop): auto scrolling not working if list uses scroll snapping (#18294)

When scrolling a drop list we increment `scrollTop` or `scrollLeft`, but if the list has scroll snapping the browser will only scroll it according to the snap points. These changes reset the scroll snapping while the user is dragging.

Fixes #18162.

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -3560,6 +3560,57 @@ describe('CdkDrag', () => {
       expect(list.lockAxis).toBe('y');
     }));
 
+    it('should disable scroll snapping while the user is dragging', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZone);
+      fixture.detectChanges();
+      const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+      const styles: any = fixture.componentInstance.dropInstance.element.nativeElement.style;
+
+      // This test only applies to browsers that support scroll snapping.
+      if (!('scrollSnapType' in styles) && !('msScrollSnapType' in styles)) {
+        return;
+      }
+
+      expect(styles.scrollSnapType || styles.msScrollSnapType).toBeFalsy();
+
+      startDraggingViaMouse(fixture, item);
+
+      expect(styles.scrollSnapType || styles.msScrollSnapType).toBe('none');
+
+      dispatchMouseEvent(document, 'mouseup');
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+
+      expect(styles.scrollSnapType || styles.msScrollSnapType).toBeFalsy();
+    }));
+
+    it('should restore the previous inline scroll snap value', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZone);
+      fixture.detectChanges();
+      const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+      const styles: any = fixture.componentInstance.dropInstance.element.nativeElement.style;
+
+      // This test only applies to browsers that support scroll snapping.
+      if (!('scrollSnapType' in styles) && !('msScrollSnapType' in styles)) {
+        return;
+      }
+
+      styles.scrollSnapType = styles.msScrollSnapType = 'block';
+      expect(styles.scrollSnapType || styles.msScrollSnapType).toBe('block');
+
+      startDraggingViaMouse(fixture, item);
+
+      expect(styles.scrollSnapType || styles.msScrollSnapType).toBe('none');
+
+      dispatchMouseEvent(document, 'mouseup');
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+
+      expect(styles.scrollSnapType || styles.msScrollSnapType).toBe('block');
+    }));
+
   });
 
   describe('in a connected drop container', () => {

src/cdk/drag-drop/drop-list-ref.ts

@@ -198,6 +198,9 @@ export class DropListRef<T = any> {
   /** Elements that can be scrolled while the user is dragging. */
   private _scrollableElements: HTMLElement[];
 
+  /** Initial value for the element's `scroll-snap-type` style. */
+  private _initialScrollSnap: string;
+
   constructor(
     element: ElementRef<HTMLElement> | HTMLElement,
     private _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>,
@@ -233,8 +236,15 @@ export class DropListRef<T = any> {
 
   /** Starts dragging an item. */
   start(): void {
+    const styles = coerceElement(this.element).style;
     this.beforeStarted.next();
     this._isDragging = true;
+
+    // We need to disable scroll snapping while the user is dragging, because it breaks automatic
+    // scrolling. The browser seems to round the value based on the snapping points which means
+    // that we can't increment/decrement the scroll position.
+    this._initialScrollSnap = styles.msScrollSnapType || (styles as any).scrollSnapType || '';
+    (styles as any).scrollSnapType = styles.msScrollSnapType = 'none';
     this._cacheItems();
     this._siblings.forEach(sibling => sibling._startReceiving(this));
     this._viewportScrollSubscription.unsubscribe();
@@ -597,6 +607,9 @@ export class DropListRef<T = any> {
   private _reset() {
     this._isDragging = false;
 
+    const styles = coerceElement(this.element).style;
+    (styles as any).scrollSnapType = styles.msScrollSnapType = this._initialScrollSnap;
+
     // TODO(crisbeto): may have to wait for the animations to finish.
     this._activeDraggables.forEach(item => item.getRootElement().style.transform = '');
     this._siblings.forEach(sibling => sibling._stopReceiving(this));