Блог

Главная - Вопросы по программированию - Как мне изменить значение translateX() свойства transform с помощью JavaScript?

Как мне изменить значение translateX() свойства transform с помощью JavaScript?

#javascript #css

#javascript #css

Вопрос:

Я хочу захватить значение translateX() свойства transform и уменьшать его на 400 пикселей каждый раз, когда запускается мое событие onDocumentMouseScroll. Я новичок в JavaScript и не уверен, как это сделать, буду признателен за любую помощь!

 var bg = document.querySelector('section.bg-type');
  
 function moveBackground() {
  if (bg.style.transform.translateX != -1600) {
    bg.style.transform = "translateX("   (-400)   "px)";
  }
};
  
 function onDocumentMouseScroll(event) {
  console.log(event);

  if (Date.now() - lastMouseWheelStep > 600) {

    lastMouseWheelStep = Date.now();

    var delta = event.detail || -event.wheelDelta;
    if (delta > 0) {
      navigateNext();
      addOnScroll();
      moveBackground();


    } else if (delta < 0) {
      navigatePrev();
    }

  }

}

Когда пользователь прокручивает ‘transform: translateX(-400px)’, свойство и значение добавляются в CSS для.bg-type, затем -400 удаляется из каждого последующего прокрутки.

Ответ №1:

Как насчет сохранения последнего значения translateX и его обновления?

 let lastTranslateX = 0;

function moveBackground() {
  if (bg.style.transform.translateX != -1600) {
    lastTranslateX -= 400;
    bg.style.transform = "translateX("   (lastTranslateX)   "px)";
  }
};

РЕДАКТИРОВАТЬ: Удалено let ранее lastTranslateX -= 400 , как предложила Темани Афиф в комментариях.

Комментарии:

1. Спасибо за быстрый ответ, но у меня это не работает. Я думаю, что проблема в «if (bg.style. transform.translateX != -1600)». Я не уверен, что это захватывает значение translateX(). Однако, насколько мне известно, весь ваш остальной код имеет смысл.

2. Я получаю «Uncaught SyntaxError: неожиданный токен -=» в «let lastTranslateX -= 400;» в консоли, кстати.

3. @SeanK вам нужно удалить let внутри if, вы снова переопределяете переменную, что неверно

4. Темани доброта незнакомцев не перестает меня удивлять, это сработало! Ты настоящий герой среди людей!