如何实现div达到指定高度内容溢出后才显示滚动条？

你之前使用overflow-y: scroll会常驻显示滚动条，是因为该属性值会强制渲染滚动条轨道，无论内容是否溢出容器。要实现「元素达到预设高度后，仅当内容溢出时才出现滚动条、支持滚动查看溢出内容」的效果，直接使用overflow-y: auto搭配明确的高度约束即可。

具体实现步骤 #

• 给目标块级元素设置高度阈值：根据需求设置固定高度height或者最大高度max-height，作为触发滚动的临界值，比如需要元素最高300px，超出就滚动，就设置max-height: 300px
• 设置纵向溢出规则：将元素的overflow-y属性值设为auto，该值的渲染逻辑为仅当内容实际溢出容器高度时才显示滚动条，内容未溢出时滚动条完全隐藏，不会占用容器空间
• （可选）补充横向溢出规则：如果不需要横向滚动，可以添加overflow-x: hidden避免内容宽度超出时出现横向滚动条

完整代码示例 #

/* 给目标div添加该类即可 */
.custom-scroll-box {
  /* 预设的高度阈值，可根据实际需求调整数值 */
  max-height: 300px;
  /* 仅内容溢出时显示纵向滚动条 */
  overflow-y: auto;
  /* 可选：禁止横向滚动 */
  overflow-x: hidden;
  /* 可选：添加平滑滚动效果 */
  scroll-behavior: smooth;
}

补充说明：在MacOS等默认采用悬浮式滚动条的系统中，overflow-y: scroll平时也会自动隐藏滚动条，仅滚动时显示；但在Windows等默认常驻滚动条轨道的系统中，overflow-y: scroll会一直显示灰色滚动条占位，overflow-y: auto则可以完全规避这个问题。

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