Javascript 移动图像时，图像将返回其原始比例值

我有一个图像，它的缩放取决于你的屏幕大小，随着屏幕变小，我会将图像缩放得更大。问题是当我添加视差效果并执行transformY（）时。出于某种原因，当我使用transformY（）移动图像时，图像会返回到其原始比例值1

@media (max-width: 1560px) {
   img {
     transform: scale(2);
   }
}

onScroll() {
   image.style.transform = `translateY(${window.pageYoffset * 0.7})`;
}

---

由于CSS的级联特性，如果重新应用转换声明，将只应用最新的更改。因此，您必须在翻译后再次进行trnasform以应用最新的更改。

---

请再次在scroll上应用媒体分辨率，如果您使用的是SCSS，请调用该方法

由于CSS的级联特性，如果重新应用转换声明，则只会应用最新的更改。因此，您必须在翻译后再次进行trnasform以应用最新的更改。

---

请再次在scroll上应用媒体分辨率，如果您使用的是SCSS，请调用该方法

在

onScroll

函数中，您可以覆盖transform css crule。
将图像包装到元素中并对其应用缩放可能更方便。e、 g:

<div clas="img-container">
   <img ... />
</div>

@media (max-width: 1560px) {
   .img-container {
     transform: scale(2);
   }
}

onScroll() {
   image.style.transform = `translateY(${window.pageYoffset * 0.7})`;
}

@介质（最大宽度：1560px）{
.img集装箱{
变换：尺度（2）；
}
}
onScroll（）{
image.style.transform=`translateY（${window.pageYoffset*0.7}）`；
}

在

onScroll

函数中，您可以覆盖transform css crule。
将图像包装到元素中并对其应用缩放可能更方便。e、 g:

<div clas="img-container">
   <img ... />
</div>

@media (max-width: 1560px) {
   .img-container {
     transform: scale(2);
   }
}

onScroll() {
   image.style.transform = `translateY(${window.pageYoffset * 0.7})`;
}

@介质（最大宽度：1560px）{
.img集装箱{
变换：尺度（2）；
}
}
onScroll（）{
image.style.transform=`translateY（${window.pageYoffset*0.7}）`；
}

通过设置CSS并仅调整其值，您可以让生活更轻松

const img=document.querySelector（'img'）；
window.addEventListener（'scroll'，onScroll）；
函数onScroll（）{
让offsetY=（window.pageYOffset*0.7）+“px”；
document.documentElement.style.setProperty（'--tY'，offsetY）；
}

：根目录{
--tY:0px；
}
img{
改变：转变；
转换：标度（2）translateY（var（--tY））；
}
身体{
高度：4000px；
}

---

您可以通过设置CSS并仅调整其值来简化操作

const img=document.querySelector（'img'）；
window.addEventListener（'scroll'，onScroll）；
函数onScroll（）{
让offsetY=（window.pageYOffset*0.7）+“px”；
document.documentElement.style.setProperty（'--tY'，offsetY）；
}

：根目录{
--tY:0px；
}
img{
改变：转变；
转换：标度（2）translateY（var（--tY））；
}
身体{
高度：4000px；
}

---

image.style.transform=

translateY（${window.pageYOffset*0.5}px）比例（1.8）

；这就是我所做的，它起作用了。image.style.transform=

translateY（${window.pageYOffset*0.5}px）scale（1.8）

；我就是这么做的，而且很管用。