如何创建一个可以从屏幕底部滑动的页面？

<div id="slide-container">
  <!-- 页面内容 -->
</div>

#slide-container {
  position: fixed;
  bottom: 0;
  height: 100vh; /* 设置容器高度为屏幕高度 */
  width: 100%;
  background-color: #f1f1f1;
}

window.addEventListener('scroll', function() {
  var slideContainer = document.getElementById('slide-container');
  var scrollHeight = document.documentElement.scrollHeight;
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  if (scrollTop + windowHeight >= scrollHeight) {
    // 到达页面底部，执行滑动动画
    slideContainer.style.transform = 'translateY(-100%)';
  } else {
    // 滑动到其他位置，恢复原始状态
    slideContainer.style.transform = 'translateY(0)';
  }
});