javascript - 使用 Javascript 样式化 css 转换

Question

我似乎无法向 body 元素添加变换(对于为什么它不起作用有一个巨大的大脑障碍)。我正在尝试尝试一些滚动效果。

到目前为止的进展:

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