title: Angular CDK - overlay attach to target while scrolling
body: <p>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.</p>
  <p>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.</p>
  <p><a href="https://stackblitz.com/edit/overlay-scroll-template?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">Stackblitz example that uses the directives</a></p>
  <p>I try to achieve the same without the directives but with the usage of the Overlay service.</p>
  <p><a href="https://stackblitz.com/edit/overlay-scroll-code?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">Stackblitz example that uses the services</a></p>
  <p>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.</p>