使用Javascript设置css转换的样式

我似乎无法给身体元素添加一个转换，因为它有一个巨大的大脑块，为什么它不起作用。我正在尝试一些滚动效果

迄今取得的进展：

document.addEventListener('scroll', function () {
var previousScrollPos = 0;
var currentScrollPos = document.body.scrollTop;
var transformValue = -500px;
if(currentScrollPos > previousScrollPos) {
        document.body.style.transform = "translate-y(transformValue)";
    }
}

更新 这是我现在的工作代码

document.addEventListener('scroll', scroller)

function scroller() {
    var previousScrollPos = 0;
    var currentScrollPos = document.body.scrollTop;
    var nextScrollPos = 0;
    if (currentScrollPos > previousScrollPos) {
        nextScrollPos = nextScrollPos - 100;
        document.body.style.transform = "translateY(" + nextScrollPos + "vh)";
    } else {
        nextScrollPos = nextScrollPos + 100;
        document.body.style.transform = "translateY(" + previousScrollPos + "vh)";
    }

}

---

你的语法错了。平移Y轴的方式如下所示：

变换：translateY-500px

因此，正确的写作方法应该是：

...
var transformValue = -500;
if(currentScrollPos > previousScrollPos) {
        document.body.style.transform = "translateY(" + transformValue + "px)";
    }
}

---

你的语法错了。平移Y轴的方式如下所示：

变换：translateY-500px

因此，正确的写作方法应该是：

...
var transformValue = -500;
if(currentScrollPos > previousScrollPos) {
        document.body.style.transform = "translateY(" + transformValue + "px)";
    }
}

---

-500px导致未捕获的语法错误：无效或意外标记。px不是一个内置的单个或一组字符，可以附加到JavaScript原语数字或小数中，而不会导致语法错误。转换属性是否设置为CSS？您知道translate YTransferMValue不能以这种方式工作吗？@GottZ您不能使用存储的变量值来设置它的样式吗？-500px是一个字符串。你不能像现在这样把它当作一个整数来存储。用引号括起来。调用变量时，将其设置为sting+transformValue+string。@rufus-500px不是语法错误？-500px导致未捕获的语法错误：无效或意外的标记。px不是一个内置的单个或一组字符，可以附加到JavaScript原语数字或小数中，而不会导致语法错误。转换属性是否设置为CSS？您知道translate YTransferMValue不能以这种方式工作吗？@GottZ您不能使用存储的变量值来设置它的样式吗？-500px是一个字符串。你不能像现在这样把它当作一个整数来存储。用引号括起来。当调用变量时，将其设置为sting+transformValue+string。@rufus-500px不是语法错误吗？你知道，我有点喜欢这样，而不是在注释中将-500px放在引号中。这样，您也可以对其执行数学运算+1这正是我想要实现的目标，非常感谢您，非常感谢。还要感谢其他人的建议和指出我的错误。真是漫长的一天！我刚刚用你的答案中的工作代码更新了我的帖子，效果很好。我现在的问题是，向下滚动似乎只工作一次。有人知道为什么卷轴不会在每一个向下的卷轴上都开火吗？@rufus，这是另一个问题。但是查看代码时，您正在重置每个滚动上的上一个&nextScrollPos值。如果我知道你想做的是对的，它们应该在滚动回调之外，这样你就可以与之前的实际值进行比较。你知道，我有点喜欢这个，而不是把-500px放在引号中的评论。这样，您也可以对其执行数学运算+1这正是我想要实现的目标，非常感谢您，非常感谢。还要感谢其他人的建议和指出我的错误。真是漫长的一天！我刚刚用你的答案中的工作代码更新了我的帖子，效果很好。我现在的问题是，向下滚动似乎只工作一次。有人知道为什么卷轴不会在每一个向下的卷轴上都开火吗？@rufus，这是另一个问题。但是查看代码时，您正在重置每个滚动上的上一个&nextScrollPos值。如果我知道你想做的是对的，它们应该在滚动回调之外，这样你就可以与之前的实际值进行比较。