Как добавить плавность для карусели при событии mousemove?

Question

Только начал писать код, для наглядности:

const onMouseDown = (evt) => {
    let posX = evt.pageX;
    let current = 0;

    const onMouseMove = (evt) => {
        if (evt.pageX < posX) {
            posX = evt.pageX;
            current -= 5;
        } else {
            posX = evt.pageX;
            current += 5;
        }

        menuList.style.transform = `translateX(${current}px)`;
    };

    menuList.addEventListener('pointermove', onMouseMove)
};


menuList.addEventListener('pointerdown', onMouseDown);

Проблема в том, что когда я двигаю мышкой по слайдеру, то он очень дергается при добавлении transition. То есть, mousemove и transition работаю как то криво вместе в данном случае. Как можно решить?

Answer 1

Проблема в данном коде заключается в том, что при каждом движении мыши слайдер сдвигается на 5 пикселей (влево или вправо), в результате чего возникает дергание.

Чтобы сделать слайдер более плавным, можно изменить эту логику и сдвигать его на количество пикселей, на которое переместился курсор мыши между событиями "mousedown" и "mousemove". Для этого можно сохранить начальное положение курсора мыши в переменную в обработчике "mousedown" и вычислить смещение в обработчике "mousemove".

Исправленный код будет выглядеть следующим образом:

let startX = null;
let current = 0;

const onMouseDown = (evt) => {
    startX = evt.pageX;
};

const onMouseMove = (evt) => {
    if (startX !== null) {
        const diff = startX - evt.pageX;
        current += diff;
        startX = evt.pageX;
        menuList.style.transform = `translateX(${current}px)`;
    }
};

const onMouseUp = () => {
    startX = null;
};

menuList.addEventListener('mousedown', onMouseDown);
menuList.addEventListener('mousemove', onMouseMove);
menuList.addEventListener('mouseup', onMouseUp);
menuList.addEventListener('mouseleave', onMouseUp);

Здесь мы сохраняем начальное положение курсора мыши в переменную startX в обработчике "mousedown", затем в обработчике "mousemove" вычисляем смещение diff и увеличиваем переменную current на это значение. Затем мы обновляем положение слайдера, используя свойство transform и передавая значение переменной current.

В обработчике "mouseup" и "mouseleave" мы сбрасываем переменную startX до значения null, чтобы прекратить перемещение слайдера, когда пользователь отпускает кнопку мыши или уводит курсор мыши за пределы слайдера.

Надеюсь помог, удачи!

БЛОГ НА HUSL

Как добавить плавность для карусели при событии mousemove?

Ответы (1 шт):