Angular CDK -滚动时叠加在目标上

Question

我试图实现一个覆盖与Angular CDK。叠加是在一个有水平滚动的容器中使用的。如果我们滚动到左边，覆盖应该保持在原来的位置或消失。

我可以通过使用CDK指令成功地实现这个行为。(通过点击打开按钮打开覆盖，并向左滚动)。叠加在按钮后面。 使用指令 的Stackblitz示例我尝试在没有指令的情况下实现相同的效果，但使用了Overlay服务。

使用 服务的Stackblitz示例在这种情况下，覆盖层保持不变，不随内容移动。我需要在指令上使用服务，因为我们将把它封装在一个自定义指令后面。如果您对如何使用服务实现与使用指令相同的行为有任何想法，我们非常欢迎。提前谢谢。

Answer 1

我认为您应该能够通过以下配置实现该行为:

this.overlayRef = this.overlay.create({
scrollStrategy: this.overlay.scrollStrategies.reposition(), // remove autoClose: true option
hasBackdrop: false,
positionStrategy: this.overlay
.position()
.flexibleConnectedTo(this.button)
.setOrigin(this.button)
.withScrollableContainers([this.scrollContainer])
.withPositions([                                         // correct this as you want
{
originX: "start",
originY: "bottom",
overlayX: "start",
overlayY: "top"
}
])
.withFlexibleDimensions(false)                          // add this
.withPush(false)                                       // add this
}); 

叉形Stackblitz