使用JavaScript样式化CSS转换

Question

我似乎无法在身体元素上添加变形（拥有巨大的大脑块来说明为什么它不起作用）。 我正在尝试一些滚动效果。

迄今为止的进展：

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)";
    }

}

Answer 1

您的语法错误。 将Y轴平移用驼峰式的形式编写，如下所示：

转换：translateY（-500px）;

因此正确的编写方式应该是：

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