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
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.