如何制作带有滚动内容的固定页脚模式？

<div class="main-container">
  <!-- 页面内容 -->
</div>

<footer class="footer">
  <!-- 页脚内容 -->
</footer>

body {
  margin: 0;
  padding: 0;
}

.main-container {
  min-height: calc(100vh - 50px); /* 设置主体容器的最小高度，减去页脚高度 */
  padding-bottom: 50px; /* 设置主体容器的底部内边距，等于页脚高度 */
}

.footer {
  position: fixed; /* 设置页脚容器为固定定位 */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px; /* 设置页脚高度 */
}

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.querySelector(".footer").style.bottom = "0";
  } else {
    document.querySelector(".footer").style.bottom = "-50px";
  }
  prevScrollpos = currentScrollPos;
}