Angular — проблема с горизонтальной прокруткой при перетаскивании элементов мышью ⇐ CSS

[Anonymous]

Я пытаюсь создать горизонтальный скроллер для изображений в Angular, но он должен прокручиваться влево-вправо при перетаскивании изображений влево или вправо с помощью мыши. Я написал следующий код в файле TS компонента:

@ViewChild('container', { static: true }) контейнер: ElementRef; @ViewChild('images', { static: true }) images: ElementRef; isDraging = ложь; СтартПозиция = 0; прокрутка влево = 0; нгАфтервиевинит () { константный контейнер = this.container.nativeElement; const images = this.images.nativeElement; пусть начальныйTranslateX = 0; // МЫШЬ: Container.addEventListener('mousedown', (e: MouseEvent) => { е.preventDefault(); this.isDragged = true; this.startPosition = e.clientX - InitialTranslateX; контейнер.стиль.курсор = 'захват'; console.log(initialTranslateX) }, истинный); Container.addEventListener('mousemove', (e: MouseEvent) => { if (!this.isDragged) return; const x = e.clientX - this.startPosition; const newTranslateX = InitialTranslateX + x; console.log(newTranslateX); this.setTranslateX(изображения, newTranslateX); }, истинный); Container.addEventListener('mouseup', () => { this.isDragged = ложь; контейнер.стиль.курсор = 'захватить'; InitialTranslateX = this.getTranslateX(изображения); }, истинный); Container.addEventListener('mouseleave', () => { this.isDragged = ложь; контейнер.стиль.курсор = 'захватить'; InitialTranslateX = this.getTranslateX(изображения); }, истинный); } setTranslateX (изображения, TranslateX: число) { images.style.transform = `translateX(${translateX}px)`; } getTranslateX(изображения): число { const TransformValue = window.getComputedStyle(images).transform; константная матрица = новый WebKitCSSMatrix (transformValue); вернуть матрицу.m41; } Следующий блок кода в HTML-файле компонента:

И следующий код в CSS-файле компонента:

.image-container { ширина: 1000 пикселей; переполнение: скрыто; } .изображений { ширина: подходящее содержимое; } Проблема в том, что когда я в первый раз прокручиваю при перетаскивании элементов, все работает нормально, но после первого раза оно действительно начинает работать некорректно. #images div прыгает влево и вправо каждый раз, когда я пытаюсь прокрутить после первого раза.

Я отлаживал код и пытался найти ошибку в вычислении значений свойства TranslateX, но мне не удалось найти ошибку.