滚动内部元素时，选择菜单选项不会粘在父元素上

Question

滚动内部元素时，选择选项菜单不会随页面滚动，而是停留在同一位置

Basic HTML Layout

When Scrolling the inner div element

这是 app.component 的代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
}

.wide{
  width: 200px;
}

body{
  height: 2000px;
}

.container{
  height: 200px;
  overflow: scroll;
}

<div class="container">
  <nz-select class="wide">
    <nz-option
      class="wide"
      *ngFor="let item of [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5]"
      [nzLabel]="item"
    ></nz-option>
  </nz-select>
  <p>
    Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Some Text Some
    Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Some Text Some Text Some Text
    Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Some Text Some Text Some Text Some Text Some
    Text Some Text Some Text Some Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Some Text Some Text Some Text Some Text Some Text Some Text
    Some Text Some Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Some Text Some
    Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Some Text Some Text Some Text
    Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text Text Some Text Some Text Some TextSome Text
    Text Some Text Some Text Some TextSome Text Text Some Text Some Text Some
    TextSome Text Text Some Text Some Text Some TextSome Text Text Some Text
    Some Text Some TextSome Text
  </p>
</div>

如何使选项菜单坚持其父元素？

我希望选项菜单在滚动时保持连接到它的父选择元素

Answer 1

我已经使用 (scroll) 创建了一个解决方法

app.component.html -

<div class="inner-content" (scroll)="SetupOnScroll($event,routerOutletContainer)" #routerOutletContainer>
     <router-outlet></router-outlet>
</div>

app.component.ts -

SetupOnScroll(event:any,routerOutletContainer:any){
  let overlaypanes:any = document.getElementsByClassName("cdk-overlay-pane");
  let amountScrolled = this.lastScrollTop - routerOutletContainer.scrollTop;
  this.lastScrollTop = routerOutletContainer.scrollTop;
  if(overlaypanes.length > 0){
    for (let index = 0; index < overlaypanes.length; index++) {
      const overlaypane = overlaypanes[index];
      const paneTop = overlaypane.style.top;
      const paneBottom = overlaypane.style.bottom;
      if(paneTop != 0){
        overlaypane.style.top = Number(paneTop.replace("px", "")) + amountScrolled +"px";
      }
      if(paneBottom != 0){
        overlaypane.style.bottom = Number(paneBottom.replace("px", "")) + (amountScrolled * -1) +"px";
      }
    }
  }
}

这将根据滚动值更新当前打开的 cdk-overlay-pane 的顶部或底部