Question

我想每次打开onDocumentMouseScroll事件时都获取transform属性的translateX（）值并带走-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处删除-400。

Answer 1

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

let lastTranslateX = 0;

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

编辑：按照Temani Afif在评论中的建议，在let之前删除了lastTranslateX -= 400。

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

1 个答案: