ngx-datatable集成Angular Material CDK拖拽时自动滚动失效问题求助

在使用ngx-datatable渲染表格并集成Angular Material CDK拖拽功能时，列表较长且滚动到底部后，将底部条目拖拽至顶部过程中，表格无法自动跟随滚动。以下是可行的解决方案：

方案：自定义拖拽滚动逻辑 #

因为ngx-datatable自带的滚动容器无法被CDK拖拽的自动滚动机制识别，所以需要手动监听拖拽事件，根据鼠标位置触发容器滚动。

步骤1：模板修改 #

在拖拽的单元格模板中绑定cdkDragMoved事件，用于监听拖拽过程：

<ngx-datatable
  [ngStyle]="{ height: tableHeight }"
  #invoicesTable
  class="material bxt-table"
  [rows]="rows"
  [rowHeight]="40"
  [scrollbarV]="true"
  columnMode="flex"
  cdkDropList
  (cdkDropListDropped)="changeInvoiceOrder($event)"
  [headerHeight]="50"
  [footerHeight]="0"
  [limit]="100">
  <!-- 示例列 -->
  <ngx-datatable-column name="序号">
    <ng-template let-row="row" ngx-datatable-cell-template>
      <div cdkDrag (cdkDragMoved)="onDragMoved($event)">
        {{ row.id }}
      </div>
    </ng-template>
  </ngx-datatable-column>
  <!-- 其他列定义 -->
</ngx-datatable>

步骤2：组件逻辑实现 #

在组件中获取ngx-datatable的内部滚动容器，实现滚动触发逻辑：

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { CdkDragMove } from '@angular/cdk/drag-drop';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  @ViewChild('invoicesTable') invoicesTable!: ElementRef;
  private scrollContainer!: HTMLElement;
  private scrollTimer: any;
  rows: any[] = []; // 你的表格数据
  tableHeight = '600px'; // 你的表格高度设置

  ngOnInit() {
    // 初始化数据...
  }

  ngAfterViewInit() {
    // 获取ngx-datatable的内部滚动容器，根据实际DOM结构调整选择器
    this.scrollContainer = this.invoicesTable.nativeElement.querySelector('.datatable-scroll-wrapper') ||
                           this.invoicesTable.nativeElement.querySelector('.datatable-body');
  }

  onDragMoved(event: CdkDragMove) {
    const containerRect = this.scrollContainer.getBoundingClientRect();
    const mouseY = event.pointerPosition.y;
    const triggerMargin = 50; // 触发滚动的边缘距离
    const scrollSpeed = 6; // 滚动速度

    // 鼠标靠近顶部，向上滚动
    if (mouseY < containerRect.top + triggerMargin) {
      this.startScroll(-scrollSpeed);
    }
    // 鼠标靠近底部，向下滚动
    else if (mouseY > containerRect.bottom - triggerMargin) {
      this.startScroll(scrollSpeed);
    }
    // 鼠标在中间区域，停止滚动
    else {
      this.stopScroll();
    }
  }

  private startScroll(speed: number) {
    if (this.scrollTimer) return;
    // 以约60fps的频率更新滚动位置
    this.scrollTimer = setInterval(() => {
      this.scrollContainer.scrollTop += speed;
    }, 16);
  }

  private stopScroll() {
    if (this.scrollTimer) {
      clearInterval(this.scrollTimer);
      this.scrollTimer = null;
    }
  }

  changeInvoiceOrder(event: any) {
    // 停止滚动
    this.stopScroll();
    // 执行原有排序逻辑
    const movedRow = this.rows.splice(event.previousIndex, 1)[0];
    this.rows.splice(event.currentIndex, 0, movedRow);
    // 触发表格刷新
    this.rows = [...this.rows];
  }
}

注意事项 #

• 滚动容器选择器：不同版本的ngx-datatable内部DOM结构可能不同，需要通过浏览器开发者工具确认实际的滚动容器类名，常见的有.datatable-scroll-wrapper或.datatable-body
• 参数调整：可以根据需求修改triggerMargin（触发滚动的边缘距离）和scrollSpeed（滚动速度），优化交互体验
• 内存泄漏：拖拽结束时必须清除滚动定时器，避免内存泄漏

备选方案：调整滚动容器归属（保留原样式） #

如果不想自定义滚动逻辑，可以尝试将ngx-datatable的滚动容器暴露给CDK：

1. 保留ngx-datatable的[scrollbarV]="true"设置
2. 创建自定义指令，将ngx-datatable的内部滚动容器注册到CDK的ScrollDispatcher
3. 确保CDK能识别该容器作为滚动区域

不过这种方案需要了解CDK的ScrollDispatcher机制，实现复杂度较高，自定义滚动逻辑的方案更直接可控。

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