Angular Datepicker页面滚动异常问题修复请求

项目中使用的Datepicker组件在页面滚动时无法正常工作，更换组件后问题依旧，相关HTML代码如下：

<div class="col-5 col-md-3 px-0 daterange-picker">
  <div class="form-group">
    <div class="input-group">
      <input type="text" id="secondDateRange" class="form-control pl-2 pr-1 text-center overflow-"
        name="daterangepickerInput" daterangepicker [options]="options" />
    </div>
  </div>

  <!-- <input type="text" name="daterangepickerInput" daterangepicker [options]="options" /> -->
  <!-- <date-range-picker [instanceId]="'secondDateRange'" [options]="options" 
    [controlName]="'secondDateRange'" #dateRangePicker (rangeSelected)="onRangeSelected($event)">
    <div class="form-group">
      <div class="input-group">
        <input id="secondDateRange" class="form-control pl-2 pr-1 text-center" type="text" name="dateRange"
          [value]="displayDateRange" placeholder="Date Range" formControlName="secondDateRange" [disabled]="true" />
      </div>
    </div>
  </date-range-picker> -->
</div>

问题表现参考截图：

以下是针对性修复方案：

• 修复弹窗定位不跟随滚动
  多数Datepicker弹窗默认用绝对/固定定位，若组件未监听滚动事件更新位置，会出现错位或脱离视野的情况。

  1. 给Datepicker指令添加模板引用，在组件类中监听窗口滚动并触发位置更新：

     import { HostListener, ViewChild } from '@angular/core';
     // 根据你使用的Datepicker组件导入对应指令，示例为ngx-daterangepicker-material
     import { DaterangepickerDirective } from 'ngx-daterangepicker-material';
     
     export class YourComponent {
       @ViewChild('daterangePicker') daterangePicker!: DaterangepickerDirective;
     
       @HostListener('window:scroll')
       onScroll() {
         if (this.daterangePicker?.isOpen) {
           // 调用组件内置的位置更新方法，不同组件方法名可能不同，如updatePosition
           this.daterangePicker.updatePosition();
         }
       }
     }
     

     对应的HTML修改：

     <input type="text" id="secondDateRange" class="form-control pl-2 pr-1 text-center overflow-"
            name="daterangepickerInput" daterangepicker [options]="options" #daterangePicker />
     

• 避免弹窗被父容器裁剪
  若Datepicker的父容器设置了overflow: auto或overflow: hidden，滚动时弹窗会被容器遮挡。可将弹窗挂载到body节点下：
  在组件的options配置中添加：

  options = {
    // 你的原有配置
    appendTo: document.body
  };
  

• 排查滚动事件冲突
  检查页面全局滚动监听逻辑，确保没有调用event.preventDefault()或阻止事件冒泡的代码，这类操作可能干扰Datepicker的默认滚动响应。

内容的提问来源于stack exchange，提问作者Dhruvil Patel