如何使用JavaScript更改transform属性的translateX（）值？

Question

我想获取transform属性的translateX（）值，并在每次触发onDocumentMouseScroll事件时将其带走-400px。 我是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 for.bg-type时，那之后每个滚动上的-400被取走。

Answer 1

如何存储最后的translateX值并更新它？

let lastTranslateX = 0;

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

编辑：删除let前lastTranslateX -= 400作为意见建议的毯螅阿菲夫。