fix(drag-drop): auto scrolling not working if list uses scroll snapping (angular#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 angular#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));