这个问题的解决方案是通过指定一个 scrollHandler 在滚动时实时更新父组件的位置。可以通过在 ng-scrollbar 上使用 scrollHandler 来实现这个功能。

代码示例：

在父元素模板中，添加 ngx-scrollbar，同时我们需要指定该组件的类名为 'horizontal-scrollbar'，并在组件上添加 scrollHandler：

在组件中，实现 onHorizontalScroll 方法：

import { Component, ElementRef, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { NgScrollbar } from 'ngx-scrollbar';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.scss']
})
export class ContainerComponent implements OnInit, OnDestroy {
  
  @ViewChild(NgScrollbar) scrollbar: NgScrollbar;

  contentWidth: number;
  containerWidth: number;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.contentWidth = this.el.nativeElement.offsetWidth;
    this.containerWidth = this.el.nativeElement.querySelector('.content').offsetWidth;
  }

  ngOnDestroy() {
    // cleanup code here
  }

  onHorizontalScroll(event: any) {
    const children = this.el.nativeElement.querySelectorAll('.content > *');
    for (let i = 0; i < children.length; i++) {
      children[i].style.transform = `translateX(${-event.x}px)`;
    }
    this.scrollbar.updatePosition();
  }

}

在 onHorizontalScroll 回调函数中，我们获取所有列的引用并将它们的位置向左移动指定的像素数。然后，我们负责在更新所有列的位置之后手动更新滚动条的位置。

现在，父组件应该可以在拖动水平滚动条时正常与列互动了。