JS style.transform translate not responding in CSS

Question

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>

Answer 1

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>