Ng-zorro-antd: Select/Datepicker/Cascader menu position not fixed when scrolling in some layout

[rppig42]

Reproduction link

https://stackblitz.com/edit/angular-qdkmuq?file=src/app/app.component.ts

Steps to reproduce

1. click the select control to open menu
2. scroll outside the control

What is expected?

1. menu position is fixed

What is actually happening?

1. menu position scrolls

| Environment | Info |
|---|---|
| ng-zorro-antd | 10.1.0 |
| Browser | Chrome latest |

---

it may have something to do with https://github.com/NG-ZORRO/ng-zorro-antd/commit/aa4ac2be98952e5fc0f639bb2ba330bc4080f3ce

[vthinkxie]

https://material.angular.io/cdk/scrolling/overview
https://stackblitz.com/edit/angular-qdkmuq-hfbfmq?file=src/app/app.component.ts

[msyesyan]

@vthinkxie 这种方式解决感觉不是很优雅。主要是对于一般的使用者来说，我们是没有cdkOverlay 这个概念的（假定我们项目里不使用这个组件），可是却为了这个问题要去在一个 container 上去写一个 cdkScrollable 的 directive.

另外其实我们还遇到了另一个问题，就是我们的 header 是 fixed to top 的，然后当我们设置了全局的 scrollable 之后，有些 nz-select 的下拉弹框随着滚动会直接盖住 header, 这个看起来就不是很对。而如果我们又通过修改了 header 的 z-index 使其大于 cdkOVerlay 的 1000 的 z-index 的话，又会导致 nz-drawer 使用不了（nz-drawer 的头部无法遮盖住 header。

我在 https://material.angular.io/cdk/text-field/overview 的官网上其实体验了一下 text field, 它们的做法是在有 select 框打开的状态下，禁止页面滚动。您可以试一下，我觉得这个行为也是蛮合理的。咱们的 nz-select 可以稍微按照这个思路坐下改动么？或者暴露个接口出来可以让我们方便的设置成这个行为也可以。您觉得呢 @vthinkxie

[vthinkxie]

可以增加一个全局配置，用于配置这部分的行为，@msyesyan 有兴趣提个PR吗

[msyesyan]

好的，我们研究下. 我刚才试了一下原生 html 的 select 在打开的时候页面也是不能滚动的，我觉得确实可以搞一下

[CharmingGeeker]

This PR(#6380) can solve this problem