如何加载一个直观的向上滑动过渡页面？

<div class="scroll-container">
  <div class="content">
    <!-- 初始内容 -->
  </div>
</div>

.scroll-container {
  height: 100vh; /* 设置容器高度为视口高度 */
  overflow-y: scroll; /* 设置垂直滚动条 */
  scrollbar-width: thin; /* 设置滚动条宽度 */
  scrollbar-color: #888888 #f0f0f0; /* 设置滚动条颜色 */
}

const scrollContainer = document.querySelector('.scroll-container');

scrollContainer.addEventListener('scroll', function() {
  if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight) {
    // 加载更多内容的函数
    loadMoreContent();
  }
});

.content {
  transition: transform 0.3s ease-out; /* 添加过渡效果 */
}

.content.slide-up {
  transform: translateY(-100%); /* 向上滑动 */
}

function loadMoreContent() {
  // 使用Ajax或其他方式加载更多内容
  const newContent = '<div>新加载的内容</div>';

  const content = document.querySelector('.content');
  content.innerHTML += newContent;

  // 添加向上滑动的过渡效果
  content.classList.add('slide-up');
}