CODEWITHSUNDEEP
javascript
rufus
rufus

Reputation: 857

Styling css transform with Javascript

I cannot seem to add a transform to the body element (having a mega brain block as to why its not working). I am trying to experiment with some scrolling effects.

Progress thus far:

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

UPDATE This is now my working code

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

}

Upvotes: 1

Views: 137

Answers (1)

brubs
brubs

Reputation: 1357

Your Syntax is wrong. translating the Y axis is written in camelcase like this:

transform: translateY(-500px);

So the right way to write it should be:

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

Upvotes: 4

Related Questions