CODEWITHSUNDEEP
javascriptcsstransformtranslate
suzypubes
suzypubes

Reputation: 61

JS style.transform translate not responding in CSS

I am trying to link a style.transform = translate to the scroll but it is not working. Other attributes are responding. Would be glad for any support :)

window.addEventListener('scroll', () => {
  let y = 1 + (window.scrollY || window.pageYOffset) / 20;
  y = y < 1 ? 1 : y; // ensure y is always >= 1 (due to Safari's elastic scroll)
    position = '"translate(0,' + '-' + y + 'vh)"'
    
    document.getElementById("marqueeup").style.transform = position;
})
#marqueeup {
width: 200px;
height: 100px;
background-color: red;
}
#placeholder{
width: 100px;
height: 600px;
background-color: blue;
}
<div id="marqueeup"></div>
<div id="placeholder"></div>

Upvotes: 2

Views: 706

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195962

Remove the double quoting.

use position = 'translate(0,' + '-' + y + 'vh)'

Or even better use template literals so

position = `translate(0,-${y}vh)`


window.addEventListener('scroll', () => {
  let y = 1 + (window.scrollY || window.pageYOffset) / 20;
  y = y < 1 ? 1 : y; // ensure y is always >= 1 (due to Safari's elastic scroll)
  const position = `translate(0,-${y}vh)`;

  document.getElementById("marqueeup").style.transform = position;
})
#marqueeup {
  width: 200px;
  height: 100px;
  background-color: red;
}

#placeholder {
  width: 100px;
  height: 600px;
  background-color: blue;
}
<div id="marqueeup"></div>
<div id="placeholder"></div>

Upvotes: 1

Related Questions