如何使用javascript放大scroll上的div元素？

我在这里试图实现的是，当我在这里滚动一个特定的div

.ball

，它应该放大到1.5。
但当我不在球上滚动时，它应该缩小到原来的高度和宽度
在这里，我使用

window

方法来做这个把戏，当我滚动球的时候，它就会放大，这不是我想要做的。我可以用什么来代替窗口方法？有没有其他方法可以做到这一点

constball=document.querySelector（'.ball'）；
window.addEventListener（'scroll'，（）=>{
如果（滚动）{
ball.classList.add（'active'）；
}否则{
ball.classList.remove（'active'）；
}
});
.ball{
高度：200px；
宽度：200px；
边界半径：100%；
背景颜色：橙色；
}
.ball.active{
转换：比例（1.5）；
位置：固定；
}
身体{
高度：150vh；
}
其中一种方法可能是将
球上的
.active
类的删除延迟
200
毫秒，这样每次尝试再次滚动时，计时器都会被清除，新的计时器也会开始执行同样的操作。简而言之，是一种去盎司的方法


constball=document.querySelector（'.ball'）；
让滚动超时；
window.addEventListener（'scroll'，（）=>{
ball.classList.add（'active'）；
clearTimeout（滚动超时）；
scrollTimeout=setTimeout（（）=>ball.classList.remove（'active'），200）；
});
.ball{
高度：200px；
宽度：200px；
边界半径：100%；
背景颜色：橙色；
}
.ball.active{
转换：比例（1.5）；
位置：固定；
}
身体{
高度：150vh；
}
我会在滚动后的短时间内使用setTimeout函数删除该类。不要忘记清除超时，否则会导致奇怪的行为。（正如拉克什亚在回答问题时所建议的那样）

为了使球平滑过渡，我将添加一个css过渡，如下所示


constball=document.querySelector（'.ball'）；
const container=document.querySelector（“.container”）
让滚动超时；
container.addEventListener（'scroll'，（）=>{
ball.classList.add（'active'）；
clearTimeout（滚动超时）；
scrollTimeout=setTimeout（（）=>ball.classList.remove（'active'），100）；
});
.ball{
高度：200px；
宽度：200px；
边界半径：100%；
背景颜色：橙色；
转换：转换0.3s轻松；
位置：固定；
顶部：50px；
左：50px；
}
.ball.active{
转换：比例（1.5）；
}
.集装箱{
宽度：100%；
背景：红色；
溢出：滚动；
高度：500px；
}
.集装箱内{
位置：相对位置；
宽度：100%；
高度：2000px；
}

你的意思是当你停止滚动时，该类应该被删除吗？@s.kuznetsov是的，停止滚动该分区。工作不正常。Window方法对此不起作用，因为我想在特定的div上滚动。现在，如果我滚动页面上的任意位置，球将放大。否。很抱歉，当我只在div上滚动时，我想放大球。现在如果我滚动页面上的任何位置，球将缩放到1.5。这是因为你和我都是监听滚动事件的窗口方法。让我编辑它以链接到div:）你可以在div上使用onscroll将函数绑定到div（），我将更新代码是的，请，是的，我在w3schools上看到了这段代码，但我无法使其工作。我使用了另一个技巧使其工作。如果看起来像你想要的，请告诉我。我又创建了两个div：一个用作可以滚动的容器，另一个在里面设置更高的高度，以便有空间滚动。需要注意的是，为了使这种效果更加平滑和容易，您可以检查GSAP ScrollTrigger js插件。它将帮助你实现这样的效果。谢谢你的提示，但我不认为我应该使用setTimeout，因为每100毫秒或每1秒，它就会收缩回原来的形式。想象一下，用户正在查看某个表，它包含一些数据。他/她滚动以放大，但在1或2秒钟后将再次缩小。这就是问题所在，还可以使用position sticky并将其设置为top:0，这样它就不会始终位于页面顶部，而只位于.container parent上。尝试解决这个放大缩小问题，非常感谢+1.