Angular CDK - 滚动时覆盖附加到目标 [英] Angular CDK - overlay attach to target while scrolling

问题描述

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

I am trying to implement an Overlay with the Angular CDK. The Overlay is used inside a container that has a horizontal scroll. If we scroll to the left side the overlay should stick to the original position or disappear.

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

I could successfully implement this behavior by using the CDK directives. (Open the overlay by clicking on the open button and scroll to the left). The overlay follows the button.

使用指令的 Stackblitz 示例

我尝试在没有指令的情况下实现相同的目标，但使用 Overlay 服务.

I try to achieve the same without the directives but with the usage of the Overlay service.

使用服务的 Stackblitz 示例

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

In this case, the overlay stays and doesn't move with the content. I need to use the service over the directive because we will encapsulate this behind a custom directive. Any ideas on how to achieve the same behavior with the services as with the directives are very welcome? Thx in advance.

推荐答案

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

I think you should be able to achieve that behavior with the following configuration:

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

这篇关于Angular CDK - 滚动时覆盖附加到目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！