我如何给一个固定的高度(动态)列表滚动弹出，即使它的项目还没有超过列表容器的高度？

.list-container {
  height: 300px; /* 设置容器的固定高度 */
  overflow: auto; /* 设置溢出内容显示滚动条 */
}

<div class="list-container">
  <ul class="list">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
    <!-- 添加更多的列表项目 -->
  </ul>
</div>

var listContainer = document.querySelector('.list-container');

listContainer.addEventListener('scroll', function() {
  var scrollTop = listContainer.scrollTop;
  var clientHeight = listContainer.clientHeight;
  var scrollHeight = listContainer.scrollHeight;

  if (scrollTop + clientHeight >= scrollHeight) {
    // 到达底部，执行弹出效果
    // 可以使用CSS动画或JavaScript动态添加弹出效果
    // 示例：使用CSS动画
    listContainer.classList.add('popup-animation');
  }
});

.popup-animation {
  animation-name: popup;
  animation-duration: 0.5s;
  /* 添加其他动画属性 */
}

@keyframes popup {
  0% {
    /* 初始状态 */
    transform: scale(0);
    opacity: 0;
  }
  100% {
    /* 弹出状态 */
    transform: scale(1);
    opacity: 1;
  }
}