我有一个div容器，大约是页面高度的70%。div外的30%是昏暗的(灰色(。
我正在尝试实现一种功能，在此容器内向下滚动div会导致容器div填满更多页面(更少的垂直空间变灰(，并最终填满所有页面(因此 100% 高度(。
反之亦然，当在容器内向上滚动并到达顶部时，应该会导致灰色的空间变大。在库的帮助下实现这一点的最简单方法是什么？
使用scroll事件以及scrollTop、scrollHeight和clientHeight属性的组合，我们可以得到类似于您需求的东西：
let elem = document.querySelector('div');
elem.addEventListener('scroll', () => {
if(elem.scrollTop == 0) {
elem.style.height = `${elem.clientHeight + 10}px`;
}
if(elem.scrollHeight - elem.clientHeight == elem.scrollTop) {
elem.style.height = `${elem.clientHeight + 1}px`;
}
});body {
background: #555;
height: 100vh;
margin: 0;
display: flex;
align-items: center;
overflow-y: hidden;
}
div {
background: #ccc;
height: 70%;
width: 100%;
overflow-y: scroll;
}<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>