如何将ag-grid的.ag-body-viewport DOM元素传入ngx-scrollbar的ng-content？

作为同样折腾过ag-grid自定义滚动条的开发者，我完全懂你这种卡壳的感觉！结合你用ngx-scrollbar的需求，给你几个更合理的解决方案，避开你之前踩的那些坑：

方案一：动态移动原生视口元素到ngx-scrollbar容器 #

直接复制DOM元素肯定不行，因为ag-grid的所有交互、状态都绑定在原始的.ag-body-viewport上。我们可以等ag-grid初始化完成后，把这个原生元素移动到ngx-scrollbar的内容容器里，同时处理样式和滚动同步：

实现步骤 #

1. 在模板中同时声明ag-grid和隐藏的ngx-scrollbar：

<ag-grid-angular 
  #agGrid
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

<ng-scrollbar 
  #customScrollbar
  style="display: none; height: 100%; width: 100%;"
  [trackX]="true"
  [trackY]="true"
></ng-scrollbar>

2. 在组件类中处理元素移动和滚动同步：

import { Component, ViewChild } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { ScrollbarComponent } from 'ngx-scrollbar';

@Component({
  selector: 'app-your-grid',
  templateUrl: './your-grid.component.html'
})
export class YourGridComponent {
  @ViewChild('agGrid') agGrid!: AgGridAngular;
  @ViewChild('customScrollbar') customScrollbar!: ScrollbarComponent;

  onGridReady() {
    // 等待ag-grid完全渲染，获取原生视口元素
    setTimeout(() => {
      const viewport = this.agGrid.api.getGui().querySelector('.ag-body-viewport') as HTMLElement;
      const originalParent = viewport.parentElement as HTMLElement;
      const scrollbarContent = this.customScrollbar.elementRef.nativeElement.querySelector('.ng-scrollbar-content') as HTMLElement;

      // 1. 移动视口元素到ngx-scrollbar内部
      scrollbarContent.appendChild(viewport);
      // 2. 显示自定义滚动条，隐藏原容器的溢出
      this.customScrollbar.elementRef.nativeElement.style.display = 'block';
      originalParent.style.overflow = 'hidden';
      originalParent.appendChild(this.customScrollbar.elementRef.nativeElement);

      // 3. 双向同步滚动事件，确保ag-grid的内部逻辑正常工作
      viewport.addEventListener('scroll', () => {
        this.customScrollbar.scrollTo({
          top: viewport.scrollTop,
          left: viewport.scrollLeft
        });
      });

      this.customScrollbar.scrolled.subscribe(event => {
        viewport.scrollTop = event.top;
        viewport.scrollLeft = event.left;
      });
    }, 0);
  }
}

方案二：自定义ag-grid DomLayout实现深度整合 #

如果想要更优雅、可维护的方案，可以利用ag-grid的自定义DomLayout接口，直接在布局阶段就把视口元素放到ngx-scrollbar里：

实现步骤 #

1. 创建自定义DomLayout类：

import { DomLayout, AgGrid } from 'ag-grid-community';
import { ScrollbarComponent } from 'ngx-scrollbar';
import { ComponentFactoryResolver, ApplicationRef, Injector } from '@angular/core';

export class NgxScrollbarDomLayout implements DomLayout {
  private scrollbarRef!: ScrollbarComponent;

  constructor(
    private resolver: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector
  ) {}

  init(grid: AgGrid): void {
    // 1. 动态创建ngx-scrollbar组件
    const scrollbarFactory = this.resolver.resolveComponentFactory(ScrollbarComponent);
    const scrollbarComponentRef = scrollbarFactory.create(this.injector);
    this.appRef.attachView(scrollbarComponentRef.hostView);
    this.scrollbarRef = scrollbarComponentRef.instance;

    // 2. 获取ag-grid的body容器，替换默认视口
    const bodyWrapper = grid.getGui().querySelector('.ag-body-viewport-wrapper') as HTMLElement;
    const viewport = document.createElement('div');
    viewport.classList.add('ag-body-viewport');
    
    // 3. 把视口放入ngx-scrollbar，再把滚动条放入ag-grid容器
    const scrollContent = scrollbarComponentRef.location.nativeElement.querySelector('.ng-scrollbar-content') as HTMLElement;
    scrollContent.appendChild(viewport);
    bodyWrapper.appendChild(scrollbarComponentRef.location.nativeElement);

    // 4. 绑定ag-grid需要的视口引用（关键！否则ag-grid无法计算尺寸）
    (grid as any).viewportElement = viewport;
  }

  // 实现DomLayout的必要方法，处理尺寸计算
  calculateHeight(): number {
    return this.scrollbarRef.elementRef.nativeElement.offsetHeight;
  }

  calculateWidth(): number {
    return this.scrollbarRef.elementRef.nativeElement.offsetWidth;
  }
}

2. 在组件中使用自定义布局：

import { Component } from '@angular/core';
import { NgxScrollbarDomLayout } from './ngx-scrollbar-dom-layout';
import { ComponentFactoryResolver, ApplicationRef, Injector } from '@angular/core';

@Component({
  selector: 'app-your-grid',
  template: `
    <ag-grid-angular 
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      [domLayout]="customDomLayout"
    ></ag-grid-angular>
  `
})
export class YourGridComponent {
  customDomLayout!: NgxScrollbarDomLayout;

  constructor(
    private resolver: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector
  ) {
    this.customDomLayout = new NgxScrollbarDomLayout(resolver, appRef, injector);
  }
}

避坑提醒 #

• 必须等待gridReady事件触发后再操作DOM，否则ag-grid的视口元素还未生成。
• 调整ngx-scrollbar的样式，确保它的尺寸和ag-grid的容器完全匹配，避免出现布局偏移。
• 双向同步滚动事件很重要，否则ag-grid的列宽调整、行选中等功能可能会失效。
• 测试不同ag-grid版本的兼容性，部分版本的视口元素结构可能略有不同。

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