咨询：能否为分组内的行设置垂直滚动条（限制显示行数）

当然可以实现这个需求啦！通过HTML结合CSS就能轻松给分组内的行设置垂直滚动条，让分组内容超出指定行数后可滚动查看。下面是针对你需求的具体实现示例：

示例代码 #

HTML 结构 #

<div class="group-container">
  <div class="group">
    <div class="group-title">Group 1</div>
    <div class="group-content">
      <div class="group-row">Row 1</div>
      <div class="group-row">Row 2</div>
      <div class="group-row">Row 3</div>
      <div class="group-row">Row 4</div>
      <div class="group-row">Row 5</div>
      <div class="group-row">Row 6</div>
      <div class="group-row">Row 7</div>
      <div class="group-row">Row 8</div>
      <div class="group-row">Row 9</div>
      <div class="group-row">Row 10</div>
    </div>
  </div>

  <div class="group">
    <div class="group-title">Group 2</div>
    <div class="group-content">
      <div class="group-row">Row 1</div>
    </div>
  </div>

  <div class="group">
    <div class="group-title">Group 3</div>
    <div class="group-content">
      <div class="group-row">Row 1</div>
      <div class="group-row">Row 2</div>
    </div>
  </div>
</div>

CSS 样式 #

/* 分组容器整体样式 */
.group-container {
  width: 200px;
  font-family: Arial, sans-serif;
}

/* 单个分组样式 */
.group {
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 分组标题样式 */
.group-title {
  padding: 8px 12px;
  background-color: #f5f5f5;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
}

/* 分组内容容器（核心滚动设置） */
.group-content {
  /* 设置能容纳5行的高度，假设每行高度约30px */
  max-height: 150px;
  /* 垂直方向超出时显示滚动条，内容不足时不显示 */
  overflow-y: auto;
}

/* 分组内的行样式 */
.group-row {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

.group-row:last-child {
  border-bottom: none;
}

关键说明 #

• overflow-y: auto：这是实现滚动的核心属性，当.group-content内的内容高度超过设置的max-height时，会自动显示垂直滚动条；如果内容高度不足，滚动条会隐藏。
• max-height：用来限制分组内容的最大显示高度，你可以根据每行的实际高度调整这个值，比如如果你的行高度是25px，5行就设置max-height: 125px。
• 样式可以根据你的实际需求调整，比如颜色、间距、宽度等，不影响滚动功能的实现。

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