Javascript 如何在元素中向下滚动时向上展开元素？

我有一个div，它是其“容器/父元素”高度的70%。我想把这个div扩展到最上面，因为用户在div中向下滚动，而vica反之亦然，即面板div可以达到的最低值是70%。有没有一个现有的图书馆？我需要一个平滑的过渡，这样获取scrollTop属性和递增地设置面板div的高度（它是以百分比而不是像素定义的）就不起作用了。 请在此处找到示例：

<div id='container'>
Scroll up to here
<div id='panel'>
As user scroll downs here in this div, expand this div to the top but only as much as the user has scrolled down: asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda<br>sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd
</div>
</div>

#container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: red;
}

#panel {
  position: fixed;
  width: 100%;
  height: 70%;
  bottom: 0;
    background-color: green;
    overflow-y: scroll;
}

滚动到这里
当用户在此div中向下滚动时，将此div展开到顶部，但仅限于用户向下滚动的部分：斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达
SDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSD斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达
SDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSD斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达

#容器{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景色：红色；
}
#面板{
位置：固定；
宽度：100%；
身高：70%；
底部：0；
背景颜色：绿色；
溢出y：滚动；
}

---

这是我提出的解决方案。用户滚动时，

div

的高度通过javascript设置（通过收听

scroll

事件）。然后，将高度设置为70%加上用户已滚动的量（通过使用

scrollTop

属性），直到达到某个限制。该限制是最大可能高度，您必须进行配置（在我的示例中，我将其设置为90%，但也可以是固定值）：

函数setHeight（）{
var panel=document.getElementById（“panel”）；
var container=document.getElementById（“容器”）；
var panelHeight=容器。离地高度；
变量y=面板.scrollTop；
//必须设置百分比或最大高度
最大高度=面板高度*0.9；
var targetHeight=数学最小值（最大高度，0.7*面板高度+y）；
panel.style.height=目标光+px；
document.getElementById（“panelContent”）.style.marginTop=Math.min（y，panelHeight-maxHeight）+“px”；
}
document.getElementById（'panel'）。addEventListener（“滚动”，设置高度）
#容器{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景色：红色；
}
#面板{
位置：固定；
宽度：100%；
身高：70%；
底部：0；
背景颜色：绿色；
溢出y：滚动；
}
#面板内容{
}

滚动到这里
当用户在此div中向下滚动时，将此div展开到顶部，但仅限于用户向下滚动的部分：斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达
SDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSD斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达斯达
SDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDSDdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda