PrimeNG拖拽功能导致页面滚动失效问题求助

PrimeNG 19.1.2版本的DragDrop模块在拖拽元素时，会导致页面滚轮滚动完全失效，官方示例也存在这个问题。下面是几种可行的解决方案：

1. 全局样式修复（最简单方案） #

PrimeNG在拖拽开始时会给<body>添加p-draggable-active类，部分场景下这个类会限制页面滚动。直接通过CSS强制覆盖该类的滚动限制：

body.p-draggable-active {
  overflow: auto !important;
}

将这段样式添加到全局样式文件（比如styles.css）中，即可让页面在拖拽期间保持可滚动状态。

2. 自定义指令拦截滚轮事件 #

创建一个自定义Angular指令，拦截拖拽元素上的滚轮事件，绕过PrimeNG的事件阻止逻辑，手动触发页面滚动：

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[allowScrollOnDrag]'
})
export class AllowScrollOnDragDirective {
  @HostListener('wheel', ['$event'])
  handleWheel(event: WheelEvent) {
    // 阻止事件被PrimeNG拖拽组件捕获
    event.stopPropagation();
    // 手动触发页面滚动
    window.scrollBy({
      top: event.deltaY,
      behavior: 'auto'
    });
  }
}

在拖拽元素上添加该指令（比如表格行）：

<tr pDraggable="products" [dragHandle]="dragHandle" allowScrollOnDrag>
  <!-- 行内容 -->
</tr>

这个方案兼容性较好，不会影响拖拽的核心功能。

3. 拖拽生命周期中动态控制滚动 #

利用PrimeNG拖拽组件的onDragStart和onDragEnd事件，在拖拽开始时解除页面滚动限制，结束时恢复：

// 组件类中定义方法
onDragStart() {
  document.body.style.overflow = 'auto';
  // 可选：移除PrimeNG添加的限制类
  document.body.classList.remove('p-draggable-active');
}

onDragEnd() {
  // 恢复默认状态
  document.body.classList.add('p-draggable-active');
}

模板中绑定事件：

<tr pDraggable="products" (onDragStart)="onDragStart()" (onDragEnd)="onDragEnd()">
  <!-- 行内容 -->
</tr>

该方案逻辑直接，适合需要精准控制滚动状态的场景。

4. 扩展PrimeNG拖拽指令（进阶） #

如果需要深度定制，可以扩展PrimeNG的Draggable指令，重写其滚轮事件处理逻辑：

import { Draggable } from 'primeng/draggable';
import { Directive } from '@angular/core';

@Directive({
  selector: '[customDraggable]'
})
export class CustomDraggableDirective extends Draggable {
  override handleWheel(event: WheelEvent) {
    // 不调用父类的阻止逻辑，允许滚轮事件正常传递
    event.stopPropagation();
    // 若需要保留PrimeNG的其他拖拽逻辑，可调用super.handleWheel(event)后取消默认阻止
    // super.handleWheel(event);
    // event.preventDefault = () => {};
  }
}

使用自定义指令替代原生pDraggable：

<tr customDraggable="products">
  <!-- 行内容 -->
</tr>

注意：该方案需要对PrimeNG源码有一定了解，升级PrimeNG版本时需同步检查兼容性。

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