香草javascript图像缩放滚动效果

我试图用香草javascript重新创建这个简单的jquery图像缩放滚动效果，但没有成功： 我在网上查找，所有教程似乎都使用jquery或skrollr库，这是自2014年以来不受支持的。 这是youtube上关于此效果的教程：

图像缩放滚动效果
身体{
保证金：0；
填充：0；
}
div{
宽度：100%；
高度：100vh；
溢出：隐藏；
位置：相对位置；
}
部门经理{
宽度：100%；
位置：绝对位置；
排名：0；
左：50%；
转换：翻译（-50%）；
}
/*空白区域，仅用于尝试滚动效果*/
.空白{
宽度：100%；
高度：100vh；
}
//JQUERY
$（窗口）。滚动（（）=>{
让滚动=$（窗口）.scrollTop（）；
$（'.img区域img'）.css({
宽度：100+滚动/5+“%”，
});
});
//香草JS
//window.addEventListener（'scroll'，（）=>{
//让滚动=window.scrollpop；
//document.querySelector（'.img area img'）.style.width=
//100+滚动/5+“%”；
// });

---

我已经注释掉了我的普通javascript代码。

窗口对象没有属性scrollTop。使用document.documentElement：

window.addEventListener('scroll', () => {  
    let scrollTop = document.documentElement.scrollTop;        
    document.getElementById('test').style.width = 100 + scrollTop / 5 + '%';
});

---

请参阅working fiddle:

您的代码会给您带来什么问题，使用它而不是jquery版本会产生什么结果？您在浏览器控制台中看到任何错误吗？那么会发生什么呢？有错误吗？除了jQuery版本，它将循环所有匹配选择器的元素，并且您只针对第一个元素。看起来应该是workUser Svela回答了我的问题。谢谢，非常感谢。这就是我的代码缺失的地方。

window.addEventListener('scroll', () => {  
    let scrollTop = document.documentElement.scrollTop;        
    document.getElementById('test').style.width = 100 + scrollTop / 5 + '%';
});