Javascript 在div列表中添加滚动效果

我正在尝试在div列表中添加一个滚动效果。我希望活动div的大小比上面和下面的其他两个div大一点。我想在滚动时慢慢增加活动div，但我无法做到这一点。这是我的密码

var listItem=$（“.item”）；
$（窗口）。滚动（函数（）{
让currentScroll=window.pageYOffset-5；
$（“.item”）.removeClass（“item_u活动”）；
for（设i=1；i$（文档）.height（）-90）{
i=listItem.length-1；
}
listItem[i-1].classList.add（“item_uu活动”）；
listItem[i]。样式='转换持续时间：1.5s'；
listItem[i].style.transform='scale（1.0）'；
打破
}
}
});
.item{
高度：300px；
边框：1px纯红；
宽度：自动；
填充：10px；
保证金：5px 5px 5px 5px；
}
.项目处于活动状态{
高度：300px；
边框：1px实心；
宽度：自动；
填充：10px；
保证金：5px 5px 5px 5px；
}

内容1
内容2
内容3
内容4
内容5
您可以很容易地使用纯CSS实现这一点。不需要JS。代码如下：

HTML

这样，当元素悬停时，高度将更改为指示高度。我们还可以在css中指定一个转换，指示如果指定的样式属性在目标元素上发生更改。它应该在声明的时间量（本例中为2秒）内设置其过渡动画
 它说你有一个语法错误。@King11删除了这个错误。我是为触摸设备做的，它在那里不起作用。转换提示很好，但他要求在滚动而不是悬停时增加div。
<div class="item">
  <h1> Content 1 </h1>
</div>
<div class="item">
  <h1> Content 2 </h1>
</div>
<div class="item">
  <h1> Content 3 </h1>
</div>
<div class="item">
  <h1> Content 4 </h1>
</div>
<div class="item">
  <h1> Content 5 </h1>
</div>

.item {
  height: 100px;
  width: auto;
  transition: height 2s;
}

.item:hover {
  height: 200px;
}