Angular Devextreme 大表格左移列时如何实现滚动条自动左移

方案1：内置配置开启（适用于Devextreme v21.2及以上版本） #

Devextreme DataGrid 高版本已内置列拖拽时的视口自动滚动能力，只需添加对应配置即可生效：

• 开启dxo-column-dragging的scroll属性为true
• 确保表格已开启水平滚动，columnAutoWidth设为false避免列自适应压缩
  示例代码如下：

<dx-data-grid 
  [dataSource]="tableData"
  [columnAutoWidth]="false"
>
  <!-- 开启水平滚动配置 -->
  <dxo-scrolling 
    mode="standard"
    [showScrollbar]="'always'"
  ></dxo-scrolling>
  <!-- 列拖拽配置，核心开启scroll属性 -->
  <dxo-column-dragging
    [allowReordering]="true"
    [scroll]="true"
  ></dxo-column-dragging>
  <!-- 你的列配置省略 -->
</dx-data-grid>

方案2：低版本手动实现（适用于Devextreme v21.2以下版本） #

如果使用的版本没有内置该能力，可以通过监听拖拽事件手动控制滚动条位置实现需求：

• 监听拖拽移动事件判断拖拽位置，靠近视口边界时触发滚动逻辑
• 拖拽结束/取消时清除滚动定时器避免性能问题

步骤1：模板绑定事件 #

<dx-data-grid 
  #dataGridRef
  [dataSource]="tableData"
  [columnAutoWidth]="false"
  (onDragMove)="handleDragMove($event)"
  (onDragEnd)="clearScrollTimer()"
  (onDragCancel)="clearScrollTimer()"
>
  <dxo-scrolling mode="standard"></dxo-scrolling>
  <dxo-column-dragging [allowReordering]="true"></dxo-column-dragging>
  <!-- 列配置省略 -->
</dx-data-grid>

步骤2：组件类实现逻辑 #

import { ViewChild } from '@angular/core';
import { DxDataGridComponent } from 'devextreme-angular/ui/data-grid';

export class YourComponent {
  @ViewChild('dataGridRef', { static: false }) dataGrid: DxDataGridComponent;
  // 滚动参数可根据实际交互需求调整
  private scrollTimer: number | null = null;
  private scrollStep = 12; // 单次滚动像素值
  private triggerThreshold = 25; // 触发滚动的边界距离阈值

  handleDragMove(e: any) {
    const scrollContainer = this.dataGrid.instance.element().querySelector('.dx-datagrid-rowsview');
    const containerRect = scrollContainer.getBoundingClientRect();
    const dragPosX = e.event.clientX;

    // 靠近左边界时向左滚动
    if (dragPosX - containerRect.left < this.triggerThreshold) {
      if (!this.scrollTimer) {
        this.scrollTimer = window.setInterval(() => {
          scrollContainer.scrollLeft = Math.max(0, scrollContainer.scrollLeft - this.scrollStep);
        }, 25);
      }
      return;
    }

    // 可选：靠近右边界时向右滚动
    if (containerRect.right - dragPosX < this.triggerThreshold) {
      if (!this.scrollTimer) {
        this.scrollTimer = window.setInterval(() => {
          const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
          scrollContainer.scrollLeft = Math.min(maxScrollLeft, scrollContainer.scrollLeft + this.scrollStep);
        }, 25);
      }
      return;
    }

    // 不在边界区域时停止滚动
    this.clearScrollTimer();
  }

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

注意：手动实现时如果出现滚动卡顿，可以调整scrollStep和定时器间隔的数值，匹配你的交互流畅度要求。

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