Javascript 如何创建嵌套恒温器般的滚动效果？

我写这篇文章是在参考了数百篇文章之后。我想创建/或喜欢滚动效果。我找到了这个解决方案，但它的父对象有固定的位置。我不能在网站上使用

window.addEventListener（'load'，function（）{
var-box=document.getElementById（'box'），
docHeight=document.documentElement.offsetHeight；
addEventListener（'scroll'，function（）{
//将滚动位置标准化为百分比
var scrolled=window.scrollY/（docHeight-window.innerHeight），
transformValue='缩放（'+滚动+'）；
box.style.webkitttransform=transformValue；
box.style.MozTransform=transformValue；
box.style.OTransform=转换值；
box.style.transform=transformValue；
}，假）；
}，假）
正文{
高度：2000px；
}
#容器{
宽度：200px；
高度：200px；
边框：2倍实心；
位置：固定；
}
#盒子{
宽度：100%；
身高：100%；
背景：红色；
}
我强烈推荐GSAP scrollTrigger插件





它使基于滚动位置的元素动画制作变得非常容易。比如说

gsap.timeline({ 
  scrollTrigger: {
     trigger: ".thermo",
     start: "center center",
     end: "bottom top",
     scrub: true,
     pin: true
  }
})
.from(".dial",  { y: innerWidth * 1.5 })

我会经历这一切。谢谢分享。不客气，如果对你有帮助，请接受我的回答