如何阻止Chrome在Angular 5重渲染大列表及拖拽时自动滚动？

我之前在做Angular项目结合ngx-dnd实现拖拽时，也碰到过Chrome这个离谱的自动滚动问题——明明只是拖拽调整列表顺序，结果页面莫名其妙滚到底部，折腾了好一阵才找到解决办法，给你分享几个亲测有效的方案：

方案一：锁定滚动位置，DOM更新后强制恢复 #

Chrome的自动滚动是因为它会试图保持旧DOM元素的可见性，当旧元素被移除、新元素在上方插入时，浏览器就会自动滚动。我们可以在拖拽开始时记录当前滚动位置，等Angular完成DOM渲染后，强制把页面滚回去：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
  isDragging = false;
  private lastScrollTop = 0;
  private originalOverflow = '';

  constructor(private cdr: ChangeDetectorRef) {}

  // 绑定ngx-dnd的dragStart事件
  onDragStart() {
    this.isDragging = true;
    // 记录当前滚动位置
    this.lastScrollTop = window.scrollY || document.documentElement.scrollTop;
  }

  // 绑定ngx-dnd的dragEnd事件
  onDragEnd() {
    this.isDragging = false;
  }

  // 在DOM更新后执行滚动恢复
  ngAfterViewChecked() {
    if (this.isDragging) {
      // 用requestAnimationFrame确保在浏览器重绘前执行
      requestAnimationFrame(() => {
        window.scrollTo(0, this.lastScrollTop);
        // 手动触发变更检测，避免循环更新
        this.cdr.detectChanges();
      });
    }
  }
}

这个方法的核心是在Angular的变更检测周期后，强制修正滚动位置，不让Chrome的默认行为得逞。

方案二：将滚动限制在拖拽容器内（推荐） #

把滚动上下文从整个窗口转移到拖拽容器本身，这样Chrome的自动滚动只会作用在容器内部，不会影响整个页面：

在组件的CSS中设置：

.drag-container {
  max-height: calc(100vh - 60px); /* 60px替换为你的头部/底部固定高度 */
  overflow-y: auto;
  /* 可选：自定义滚动条样式，提升体验 */
  scrollbar-width: thin;
}

然后把ngFor的列表放在这个容器里：

<div class="drag-container" ngxDroppable>
  <app-child 
    *ngFor="let item of items" 
    ngxDraggable
    [item]="item"
  ></app-child>
</div>

这个方案从根源上避免了页面级的滚动问题，同时让拖拽体验更聚焦，是我最推荐的解决方式。

方案三：拖拽时临时禁用页面滚动 #

简单粗暴但有效——拖拽开始时锁定页面滚动，结束后恢复：

onDragStart() {
  // 记录当前overflow属性，避免覆盖原有设置
  this.originalOverflow = document.body.style.overflow;
  document.body.style.overflow = 'hidden';
}

onDragEnd() {
  document.body.style.overflow = this.originalOverflow;
}

注意：如果你的页面本身需要滚动，这个方法会在拖拽时暂时阻止用户滚动页面，适合对滚动需求不高的场景。

方案四：用trackBy减少DOM销毁重建 #

默认情况下，ngFor会根据对象引用判断是否重建DOM元素，当拖拽导致列表顺序变化时，可能会大量销毁和重建组件，这也是触发Chrome自动滚动的原因之一。用trackBy函数可以减少不必要的DOM操作：

// 组件类中定义trackBy函数
trackByItemId(index: number, item: YourItemType): number {
  return item.id; // 假设你的列表项有唯一id属性
}

模板中使用：

<app-child 
  *ngFor="let item of items; trackBy: trackByItemId" 
  ngxDraggable
  [item]="item"
></app-child>

这样Angular只会更新列表项的位置，而不会销毁重建组件，既提升了性能，也降低了Chrome触发自动滚动的概率。

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