如何为div设置符合布局需求的精准滚动区域？

调整方案 #

你现在的问题是滚动属性绑定在了最外层总容器上，导致滚动范围覆盖了全部分类，无法精准控制单个分类下的卡片区域滚动。按照最多4个分类、每个分类容纳10张卡片的需求，调整代码如下：

修正后的CSS代码

/* 外层总容器：仅控制顶部间距，不做滚动逻辑 */
.containerfocuslist {
    margin-top: 4rem;
}

/* 单分类容器：包含分类标题+滚动卡片区 */
.wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px; /* 分类之间的间距，可根据视觉需求调整 */
}

/* 单分类卡片滚动区：精准控制滚动范围 */
.card-scroll-area {
    height: 350px; /* 对应你需要的红色滚动区域高度，可自行调整数值 */
    overflow-y: auto;
    /* 卡片排布样式，可根据你的设计修改，以下为示例 */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 每行2张卡片，可调整列数 */
    gap: 16px; /* 卡片间距 */
    padding-right: 8px; /* 避免滚动条挤压卡片 */
}

/* 可选：滚动条美化，不需要可以删除 */
.card-scroll-area::-webkit-scrollbar {
    width: 6px;
}
.card-scroll-area::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 3px;
}

参考HTML结构

<div class="containerfocuslist">
  <!-- 第1个分类：最多可添加4个同结构的wrapper -->
  <div class="wrapper">
    <h3>专注</h3>
    <div class="card-scroll-area">
      <div class="card">卡片1</div>
      <div class="card">卡片2</div>
      <!-- 剩余8张卡片，共10张 -->
    </div>
  </div>
  <!-- 第2~4个分类结构同上 -->
</div>

核心逻辑说明

• 将原来绑定在外层容器的overflow-y: auto和固定高度下沉到每个分类内部的卡片滚动区，实现滚动区域和你标注的红色范围完全匹配
• 每个分类独立控制滚动，互相不受影响，10张卡片超出350px高度后自动触发滚动
• 整体结构最多只有4个分类wrapper，符合DOM节点数量要求

内容的提问来源于stack exchange，提问作者Trick Shot