0

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

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 работаю как то криво вместе в данном случае. Как можно решить?

1
  • А при скроле стрелкой в десктопе нормально? Если да, тогда просто пусть при моусмуве триггерит нажатие на стрелку)). Или же сделать перед прокруткой небольшую задержку может. 16 мар в 12:24

1 ответ 1

0

Проблема в данном коде заключается в том, что при каждом движении мыши слайдер сдвигается на 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, чтобы прекратить перемещение слайдера, когда пользователь отпускает кнопку мыши или уводит курсор мыши за пределы слайдера.

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

2
  • Спасибо тебе большое. Проблема оказалась в том, что pointermove не работает правильно с transition. А mousemove нормально. интересно почему... 17 мар в 13:16
  • Если вам понравился мой ответ, поставьте ему зеленую галочку) Это будет приятно) 17 мар в 14:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.