如何使用JavaScript将div的高度转换为100%的值

我有一个

div

，我想基于父div的滚动位置应用CSS transform属性和一个动态值

因此，假设我有一个

div

和一个名为

#圆

，它有一个父

div

名为

#main

。我想找到

#main

div的高度并将其除以100以创建一个动态值。使用此动态值，我希望为上的

#圆
div
设置动画。因此，当用户位于
#main
div
的顶部时，
#圆圈
的缩放比例为0%，当用户滚动到
main
div
的底部时，圆圈的缩放比例值为100%

这是一个。
您可以使用
offsetHeight
属性获取元素的高度

前。
document.getElementById（“圆圈”）.offsetHeight
当前您的滚动容器实际上是
html
元素本身。因此，基于它的
scrollTop
，
scrollHeight
和可见高度，即
window.innerHeight
，我们可以计算
圆形刻度
值。所有这些部分都在
scrollLogic（）函数中处理


const circle=document.getElementById（'circle'）；
const html=document.documentElement；
document.body.onscroll=（）=>{
常量circleScale=scrollLogic（）；
circle.style.transform=`scale（${circleScale}）`；
};
常量滚动逻辑=（）=>{
const scrollTop=html.scrollTop；
const maxScrollTop=html.scrollHeight-window.innerHeight；
常量scrollFraction=scrollTop/maxScrollTop；
常数circleScale=Math.min(
1.
滚动分数+0.1
);
返回圆刻度
};
*{
框大小：边框框；
保证金：0；
填充：0；
}
#主要{
显示器：flex；
对齐项目：居中；
证明内容：中心；
利润率：30px0；
边框：3倍纯绿；
溢出：滚动；
}
#圈{
宽度：200px；
高度：200px；
背景色：红色；
变换：比例（0.1）；
边界半径：50%；
}
.间距{
高度：150vh；
}

谢谢你，拉克什亚·塔库尔。如果我想让滚动容器成为
#main
部分，该怎么办？@kayee我已经为
main
添加了另一个片段作为滚动容器。谢谢您的示例。这并不完全是我想要的，但我可以使用它：）你不应该这样做，而且Firefox可能会发出与滚动相关的警告。这将是缓慢的，可能冻结缓慢的设备。