【问题标题】:Select menu options don't stick to parent element when scrolling through an inner element滚动内部元素时,选择菜单选项不会粘在父元素上
【发布时间】:2022-11-10 19:20:05
【问题描述】:

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

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>

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

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

【问题讨论】:

标签: angular angular-cdk ng-zorro-antd


【解决方案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 的顶部或底部

【讨论】:

    猜你喜欢
    • 2019-05-20
    • 2017-01-18
    • 1970-01-01
    • 1970-01-01
    • 2011-08-14
    • 1970-01-01
    • 1970-01-01
    • 2021-06-16
    • 2016-11-08
    相关资源
    最近更新 更多