拖动并滚动角度

hello what i want to do in my project is when i moove the rectangle on left or right i scroll on my line as shown in the image : so when i click on the rectangle and i moove it right or left i scroll on the pink one and i can put the black rectangle on any position i want but in this case it doesn't work have u got an idea ! thanks in advance this my ts code :

  onMouseDown(event: MouseEvent) {
    this.isDragging = true;
    this.initialX = event.clientX - this.scrollOffset;
  }

  onMouseMove(event: MouseEvent) {
    if (this.isDragging) {
      const offsetX = event.clientX - this.initialX;
      this.scrollOffset = Math.max(Math.min(offsetX, 0), -(this.scaleWidth - window.innerWidth));
    }
  }

  onMouseUp(event: MouseEvent) {
    this.isDragging = false;
  }

html :

<div class="pink-rectangle" [ngStyle]="{ 'width.px': rectangleWidth }">
<div class="scrollable-rectangle">
  <div class="text-content">
    test test     test test
    test test
    test test
    test test
    test test
    test test
    test test
    test test
    test test

  </div>
</div>
<div class="black-rectangle" [ngStyle]="{ 'width.px': rectangleWidth - 20 }" (mousedown)="onMouseDown($event)">
</div>
</div>

这是 scss ：

.pink-rectangle {
  background-color: pink;
  position: relative;
  overflow: hidden;
  height: 100px;
}

.scrollable-rectangle {
  overflow-x: hidden;
  white-space: nowrap;
  height: 100%;
}

.text-content {
  display: inline-block;
  padding: 10px;
  font-weight: bold;
}

.black-rectangle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border: 2px solid black;
  width: 70%;
  height: 80%;
  z-index: 1;
  cursor: grab;
  pointer-events: none;
}