Angular技术问题：滚动body时已展开的select自动关闭如何阻止？

原生HTML <select> 的下拉菜单属于浏览器原生控件，滚动页面时浏览器会自动收起它，这是浏览器的默认行为，无法通过直接修改事件来阻止。要实现滚动页面时下拉菜单保持展开，推荐以下两种方案：

方案一：自定义下拉组件替代原生select #

自己实现一个非原生的下拉组件，完全控制展开/收起逻辑：

1. 组件结构示例：

<div class="custom-select" (click)="toggleDropdown()">
  <span class="selected-option">{{ selectedOption }}</span>
  <ul class="options-list" [class.show]="isOpen">
    <li *ngFor="let option of options" (click)="selectOption(option)">{{ option.label }}</li>
  </ul>
</div>

2. 组件逻辑：

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

@Component({
  selector: 'app-custom-select',
  templateUrl: './custom-select.component.html',
  styleUrls: ['./custom-select.component.css']
})
export class CustomSelectComponent {
  options = [
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' }
  ];
  selectedOption = '选项1';
  isOpen = false;

  toggleDropdown() {
    this.isOpen = !this.isOpen;
  }

  selectOption(option: any) {
    this.selectedOption = option.label;
    this.isOpen = false;
  }
}

3. CSS样式（确保下拉菜单不会随页面滚动消失）：

.custom-select {
  position: relative;
  width: 200px;
}

.options-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.options-list.show {
  display: block;
}

.options-list li {
  padding: 8px;
  cursor: pointer;
}

.options-list li:hover {
  background: #f5f5f5;
}

这种自定义组件完全由你控制展开状态，页面滚动时不会自动收起。

方案二：监听滚动事件手动保持展开（仅适用于特殊场景） #

如果一定要用原生select，可以尝试监听body的滚动事件，在select展开时强制重新打开，但这种方法可能有兼容性问题，且体验不佳：

1. 在组件中添加逻辑：

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<select #nativeSelect (change)="onSelectChange($event)">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>`
})
export class AppComponent {
  @ViewChild('nativeSelect') nativeSelect!: ElementRef<HTMLSelectElement>;
  isSelectOpen = false;

  ngAfterViewInit() {
    document.body.addEventListener('scroll', () => {
      if (this.isSelectOpen) {
        // 强制重新打开select
        this.nativeSelect.nativeElement.focus();
        // 触发下拉展开（部分浏览器支持）
        this.nativeSelect.nativeElement.showPicker();
      }
    });

    // 监听select的展开/收起状态
    this.nativeSelect.nativeElement.addEventListener('toggle', (e: any) => {
      this.isSelectOpen = e.newState === 'open';
    });
  }

  onSelectChange(event: Event) {
    this.isSelectOpen = false;
  }
}

注意：showPicker()方法并非所有浏览器都支持，且这种方法可能导致闪烁或异常行为，不推荐作为首选方案。

内容的提问来源于stack exchange，提问作者itan mare