Angular 8 和 Angular Material：使用 CdkDropList 项拖动滚动

Question

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

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

但在角度材料网站上没有找到任何文档。我很好奇自发布以来是否有人使用 Angular Material 在 CdkDropList 元素上实现了任何自动拖动滚动。我对角度比较新。我已尝试将 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