Angular CDK - 滚动时覆盖附加到目标

Question

我正在尝试使用 Angular CDK 实现覆盖。 Overlay 在具有水平滚动条的容器内使用。如果我们滚动到左侧，叠加层应该会粘在原来的位置或消失。

我可以使用 CDK 指令成功实现此行为。（通过单击打开按钮并向左滚动来打开叠加层）。叠加层跟随按钮。

Stackblitz example that uses the directives

我尝试在不使用指令但使用覆盖服务的情况下实现相同的效果。

Stackblitz example that uses the services

在这种情况下，叠加层保持不变，不会随内容移动。我需要在指令上使用服务，因为我们将把它封装在自定义指令后面。关于如何使用服务实现与指令相同的行为的任何想法都非常受欢迎？提前致谢。

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
});

Forked Stackblitz

Angular CDK - 滚动时覆盖附加到目标

Angular CDK - overlay attach to target while scrolling

angular-material

angular

angular-cdk