angularangular-material

Auto-scroll no longer works after moving scrollbar to inner div


I have an issue with drag-and-drop in Angular using Angular Material. I moved the scrollbar from its original location to an inner div, but now auto-scroll no longer works. I’ve created a StackBlitz example to demonstrate the issue: StackBlitz Example.

Additionally, I don’t want to set a specific height or max height because items are dynamically inserted.

i try almost everything but nothing but nothing


Solution

  • It looks like cdkDropList relies on the scrollDispatcher's getAncestorScrollContainers method, which scans the containers that have the cdkScrollable directive on them (see here and here). So, adding cdkScrollable on your outer div should fix the issue. I haven't worked much with cdk drop lists, so I'm not sure if it's working correctly, but it's scrolling when dragging an item, so I suppose that's what it was supposed to do. Forked stackblitz here.

    Note: links to cdk github point to the current repo for v19, but the reliance on cdkScrollable reamins true in the 10.0 that was used in the original stackblitz from the question.