Angular拖拽黑色矩形实现粉色容器横向滚动功能失效求助

原代码的核心问题 #

1. 滑块无法响应鼠标事件：.black-rectangle设置了pointer-events: none，直接阻断所有鼠标交互，mousedown事件根本无法触发。
2. 滚动偏移未绑定到容器：计算出的scrollOffset没有同步到可滚动容器的scrollLeft属性，内容不会跟随滚动。
3. 关键变量缺失/未初始化：scaleWidth未定义，无法计算滚动边界；rectangleWidth没有初始值，容器宽度异常。
4. 拖动事件范围受限：mousemove和mouseup仅绑定在滑块上，鼠标移出滑块后拖动会直接中断。
5. 滑块定位逻辑错误：transform: translate(-50%, -50%)让滑块始终居中，拖动时的位置计算完全混乱。

修正后的完整代码 #

TypeScript 代码

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';

@Component({
  selector: 'app-scroll-slider',
  templateUrl: './scroll-slider.component.html',
  styleUrls: ['./scroll-slider.component.scss']
})
export class ScrollSliderComponent implements OnInit {
  isDragging = false;
  initialX = 0;
  scrollOffset = 0;
  rectangleWidth = 400; // 可自定义粉色容器宽度
  contentWidth = 0; // 内容的实际总宽度

  @ViewChild('scrollableContainer') scrollableContainer!: ElementRef;
  @ViewChild('textContent') textContent!: ElementRef;

  ngOnInit() {
    // 初始化时获取内容宽度，setTimeout确保DOM渲染完成
    setTimeout(() => {
      this.contentWidth = this.textContent.nativeElement.offsetWidth;
    });
  }

  onMouseDown(event: MouseEvent) {
    this.isDragging = true;
    this.initialX = event.clientX - this.scrollOffset;
    // 绑定document级别的鼠标事件，避免移出滑块中断拖动
    document.addEventListener('mousemove', this.onMouseMove.bind(this));
    document.addEventListener('mouseup', this.onMouseUp.bind(this));
  }

  onMouseMove(event: MouseEvent) {
    if (!this.isDragging) return;
    
    const offsetX = event.clientX - this.initialX;
    // 计算滚动边界：最大滚动距离 = 内容宽度 - 容器可视宽度
    const maxScroll = this.contentWidth - this.rectangleWidth;
    // 限制滚动范围在0到最大滚动距离之间
    this.scrollOffset = Math.max(Math.min(offsetX, maxScroll), 0);
    // 同步滚动容器的scrollLeft值
    this.scrollableContainer.nativeElement.scrollLeft = this.scrollOffset;
  }

  onMouseUp(event: MouseEvent) {
    this.isDragging = false;
    // 移除document上的事件监听，避免内存泄漏
    document.removeEventListener('mousemove', this.onMouseMove.bind(this));
    document.removeEventListener('mouseup', this.onMouseUp.bind(this));
  }
}

HTML 代码

<div class="pink-rectangle" [ngStyle]="{ 'width.px': rectangleWidth }">
  <!-- 可滚动容器，添加模板引用变量 -->
  <div #scrollableContainer class="scrollable-rectangle">
    <!-- 内容容器，添加模板引用变量用于计算宽度 -->
    <div #textContent class="text-content">
      test test test test test test test test test test
      test test test test test test test test test test
      test test test test test test test test test test
    </div>
  </div>
  <!-- 拖动滑块，通过scrollOffset动态控制left位置 -->
  <div 
    class="black-rectangle" 
    [ngStyle]="{ 
      'width.px': rectangleWidth - 20,
      'left.px': scrollOffset + 10 
    }" 
    (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: translateY(-50%); // 仅垂直居中，水平位置由left属性控制
  background-color: transparent;
  border: 2px solid black;
  height: 80%;
  z-index: 1;
  cursor: grab;
  // 移除pointer-events: none，确保鼠标事件正常触发
}

.black-rectangle:active {
  cursor: grabbing; // 拖动时切换光标样式，提升交互体验
}

核心修复点说明 #

• 移除滑块的pointer-events: none，确保鼠标事件能正常触发。
• 通过@ViewChild获取DOM元素，动态计算内容总宽度，确定滚动边界。
• 将mousemove和mouseup绑定到document上，保证拖动过程不中断。
• 动态绑定滑块的left属性，让滑块跟随滚动偏移量同步移动。
• 同步scrollOffset到容器的scrollLeft，实现内容滚动与滑块拖动的联动。

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