Angular 8 和 Angular Material : Drag Scrolling with CdkDropList item

Question

我试图在拖动 cdkDropList 项目时提供滚动。截至目前，页面无法在不使用鼠标滚轮滚动的情况下滚动。我希望能够根据拖动列表项来滚动页面。谷歌搜索后，它看起来直到几个月前才可能？!

我在 angular material repo 上发现了以下提交:
https://github.com/crisbeto/material2/commit/b4be85f6716a2d1a432ef7109aa06e7255324222

但在 Angular Material 网站上没有找到任何文档。我很好奇自发布以来是否有人使用 Angular Material 在 CdkDropList 元素上实现了任何自动拖动滚动。我对 Angular 比较新。我已尝试将 cdkScrollable 标记添加到 div，但在拖动列表中的任何元素时能够使自动滚动功能工作。

想法/建议？

Answer 1

从版本 9.1.0 , 通过设置 cdkScrollable 支持自动滚动应该滚动的父级上的指令。
所以，对于 v9.1.0 并且，以下代码应该可以工作:

<div style="height: 500px; overflow-y: auto" cdkScrollable>
  <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
  </div>
</div>

Stackblitz 演示 :
https://stackblitz.com/edit/angular-swaqkk-njehwg
(使用 Angular CDK v10.0.1)
另外，我在以下主题中发布了一个更完整的答案，其中包括更多示例以及 Angular8 的解决方案:
Angular CDK - issue with scrolling and dragging element inside nested scrollable div