移动端设置全卡片可拖拽后列表滚动失效问题求助

我给移动端卡片列表的每个卡片添加拖拽（DnD）功能后，遇到了列表滚动异常的问题：

• 未设置touchAction: 'none'时，滚动列表时手指下方的卡片会同时被触发拖拽
• 设置touchAction: 'none'后，拖拽功能恢复正常，但整个列表无法滚动
• 曾尝试仅给拖拽按钮设置touchAction: 'none'，但这个方案被评审否决，原因是卡片尺寸过小，放不下单独的拖拽按钮

以下是我的代码实现：

CardComponent 组件 #

export const CardComponent = forwardRef((props: CardComponentProps) => {
  const { style, attributes, listeners, setNodeRef } = props;

  const onCardClick = () => {};

  return (
    <div style={style} {...attributes} {...listeners} ref={setNodeRef as React.ForwardedRef<HTMLDivElement>}>
      <Card onClick={onCardClick}>{/* ...content */}</Card>
    </div>
  );
});

SortableItem 组件 #

export const SortableItem = ({ id }: SortableItemProps) => {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });

  const style = {
    transform: CSS.Translate.toString(transform),
    transition,
    touchAction: 'none',
    zIndex: isDragging && 35,
  };

  return (
    <Wrapper className="mt-5">
      <CardComponent setNodeRef={setNodeRef} style={style} attributes={attributes} listeners={listeners} />
    </Wrapper>
  );
};

Dropable 组件 #

export const Dropable = ({ lists, handleDragEnd }: DropableProps) => {

  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8,
      },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );

  return (
    <Wrapper>
      {lists && (
        <DndContext
          sensors={sensors}
          collisionDetection={closestCenter}
          onDragEnd={handleDragEnd}
          modifiers={[restrictToVerticalAxis, restrictToFirstScrollableAncestor]}
        >
          <SortableContext items={lists?.map((item) => item.Id as string)} strategy={verticalListSortingStrategy}>
            {lists?.map(({ Id: id }) => {
              return <SortableItem key={id} id={id as string} />;
            })}
          </SortableContext>
        </DndContext>
      )}
    </Wrapper>
  );
};

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