JS style.transform 翻译在 CSS 中没有响应

Question

我正在尝试 link a style.transform = 翻译成卷轴，但它不起作用。其他属性正在响应。很高兴得到任何支持:)

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

删除双引号。

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

或者更好地使用模板文字

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>

JS style.transform 翻译在 CSS 中没有响应

JS style.transform translate not responding in CSS

javascript

css

transform

translate