点击页面右侧ngSelect下拉框时页面自动滚顶的问题求助

针对你遇到的「右侧偏移的ng-select点击下拉时页面自动滚顶」问题，给你几个可行的解决思路：

1. 禁用组件自带的滚动到视图行为 #

ng-select 提供了 scrollToOnOpen 属性，专门用来控制下拉展开时是否自动滚动到组件位置。直接添加该属性并设为 false 即可：

<div class="status-dropdown">
  <ng-select [dropdownPosition]="'top'"
    [searchable]="false"
    [clearable]="false"
    [scrollToOnOpen]="false" <!-- 新增此属性 -->
    [items]="statusItems"
    bindLabel="display"
    bindValue="value"
    [(ngModel)]="packageDetail.status"
    (change)="updateKeyResultStatus(packageDetail, objective, packageDetail.status)">
  </ng-select>          
</div>

2. 阻止点击事件的默认滚动行为 #

如果上述属性无效，可以尝试直接阻止点击事件的默认行为，避免触发页面滚动：

<div class="status-dropdown">
  <ng-select [dropdownPosition]="'top'"
    [searchable]="false"
    [clearable]="false"
    [items]="statusItems"
    bindLabel="display"
    bindValue="value"
    [(ngModel)]="packageDetail.status"
    (click)="$event.preventDefault()" <!-- 阻止默认滚动行为 -->
    (change)="updateKeyResultStatus(packageDetail, objective, packageDetail.status)">
  </ng-select>          
</div>

如果担心影响下拉展开，也可以在组件的 .ts 文件中通过监听事件来处理：

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

// 组件类内部添加
@HostListener('click', ['$event'])
onDropdownClick(event: MouseEvent) {
  event.preventDefault();
  event.stopPropagation();
}

3. 排查CSS布局问题 #

右侧偏移的组件可能因为父容器的样式触发滚动，检查 .status-dropdown 或其父容器的CSS，比如是否设置了 scroll-behavior: smooth、overflow: auto 等可能导致滚动的属性，尝试移除或调整这些样式。

4. 自定义下拉菜单定位 #

如果以上方法都不生效，可以强制固定下拉菜单的位置，避免组件自动调整触发滚动：
先给ng-select添加自定义类：

<ng-select class="fixed-position-dropdown" ...></ng-select>

然后添加CSS：

.fixed-position-dropdown .ng-dropdown-panel {
  position: fixed !important;
  top: calc(100% + 8px) !important; /* 根据实际位置调整 */
  right: 0 !important; /* 对应右侧偏移的位置 */
  transform: none !important;
}

内容的提问来源于stack exchange，提问作者Kadir Ersezer