如何为overlay（叠加层）在达到指定高度时添加滚动条？

HTML 结构 #

<button id="cartBtn">cart</button>

<!-- 叠加层容器 -->
<div id="overlay" class="overlay">
  <!-- 叠加层内容区域 -->
  <div class="overlay-content">
    <!-- 此处可替换为实际业务内容 -->
    <p>购物车商品1</p>
    <p>购物车商品2</p>
    <p>购物车商品3</p>
    <p>购物车商品4</p>
    <p>购物车商品5</p>
    <p>购物车商品6</p>
    <p>购物车商品7</p>
    <p>购物车商品8</p>
    <p>购物车商品9</p>
    <p>购物车商品10</p>
    <p>购物车商品11</p>
    <p>购物车商品12</p>
  </div>
</div>

CSS 样式 #

/* 叠加层默认隐藏 */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(30, 144, 255, 0.9); /* 半透蓝色背景，可自行调整色值 */
  z-index: 999;
  padding: 20px;
  box-sizing: border-box;
}

/* 叠加层内容区域，超出最大高度自动出现垂直滚动条 */
.overlay-content {
  max-height: 80vh; /* 高度阈值设为视口高度的80%，可自行修改数值 */
  overflow-y: auto;
  color: #fff;
  font-size: 16px;
}

/* 控制叠加层显示的类 */
.overlay.show {
  display: block;
}

#cartBtn {
  padding: 8px 16px;
  cursor: pointer;
}

JavaScript 逻辑 #

const cartBtn = document.getElementById('cartBtn')
const overlay = document.getElementById('overlay')

// 点击cart按钮切换叠加层显示/隐藏状态
cartBtn.addEventListener('click', () => {
  overlay.classList.toggle('show')
})

内容的提问来源于stack exchange，提问作者asem shaat