Styling css transform with Javascript

Question

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

}

-500px results in Uncaught SyntaxError: Invalid or unexpected token. px is not a built-in single or set of characters that can be appended to JavaScript primitive number or decimals without resulting in a syntax error. Is transition property set at CSS? — guest271314
– guest271314, Commented Feb 23, 2019 at 20:33
you are aware that "translate-y(transformValue)" does not work this way? — GottZ
– GottZ, Commented Feb 23, 2019 at 20:34
@GottZ can you not use a stored variable value then to style it? — rufus
– rufus, Commented Feb 23, 2019 at 20:37
-500px is a string. You can't store it like an integer as you're doing here. Put quotes around it. And when calling the variable, concetenate it like "sting "+ transformValue +" string". — icecub
– icecub, Commented Feb 23, 2019 at 20:39

brubs · Accepted Answer · 2019-02-23 20:43:33Z

4

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

answered Feb 23, 2019 at 20:43

brubs

1,36710 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user10957435 Over a year ago

You know, I kind of like this better than what's been suggested in the comments of putting "-500px" in quotes. This way, you can perform mathematical operations on it too. +1

rufus Over a year ago

this is exactly what i was trying to achieve, thank you very much for this much appreciated. Also thanks to everyone else for their suggestions and for pointing out my mistakes. Been a long day!

rufus Over a year ago

I have just updated my post with my working code from your answer which works great. The problem i am now having is the down scroll only seems to work once. Would anyone know why the scroll wont fire on every scroll down?

brubs Over a year ago

@rufus that would be another question. But looking into your code, you are resetting the previous & nextScrollPos values on each scroll. If I got what you're trying to do right, they should be outside the scroll callback so you can compare with the real previous value.

Collectives™ on Stack Overflow

Styling css transform with Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related