Ignite UI Date Picker移动端年份选择滚动功能失效求助

问题背景 #

使用Ignite UI的igx-date-picker组件时，桌面端选择年份范围滚动正常，但移动端无法触发滚动，组件采用虚拟滚动机制，自行添加滚动样式未解决问题。组件代码如下：

<div class="field-label">Date of Birth</div>
<igx-date-picker 
  #datePicker
  type="border"
  class="form-field"
  [maxValue]="today"
  formControlName="dob">
</igx-date-picker>
</div>

修复方案 #

1. 启用触摸事件支持 #

Ignite UI虚拟滚动组件在移动端可能需要显式开启触摸交互，可在组件初始化时配置容器的触摸行为：

在组件的.ts文件中添加：

import { AfterViewInit, ViewChild } from '@angular/core';
import { IgxDatePickerComponent } from 'igniteui-angular';

export class YourComponent implements AfterViewInit {
  @ViewChild('datePicker') datePicker: IgxDatePickerComponent;

  ngAfterViewInit() {
    const yearScrollContainer = this.datePicker.calendar.yearView.element.nativeElement.querySelector('.igx-virtual-scroll');
    if (yearScrollContainer) {
      yearScrollContainer.style.touchAction = 'pan-y';
      yearScrollContainer.addEventListener('touchstart', (e) => e.stopPropagation(), { passive: true });
    }
  }
}

2. 调整虚拟滚动容器样式 #

通过CSS强制开启移动端滚动支持，添加iOS弹性滚动特性：

/* 针对年份选择器的虚拟滚动容器 */
.igx-calendar__year-view .igx-virtual-scroll {
  touch-action: pan-y !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 移除容器的触摸事件拦截 */
.igx-calendar__year-view {
  touch-action: auto !important;
}

3. 升级组件版本 #

检查当前Ignite UI版本是否存在移动端滚动已知bug，建议升级到最新稳定版：

npm update igniteui-angular --save

4. 排查父容器触摸拦截 #

如果igx-date-picker所在的父容器（如表单）有自定义触摸事件处理，移除阻止事件冒泡或默认行为的代码，例如：

// 删除父容器中类似的拦截代码
parentElement.addEventListener('touchmove', (e) => e.preventDefault());

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