原生 <select> 下拉面板无法用 CSS 控制高度，因其由操作系统渲染且不在 DOM 中；唯一合法的滚动控制是 size 属性，但它是常展开列表框；高度定制需 JS 模拟组件。
原生 <select> 的滚动区域根本无法用 CSS 控制
你不能靠 max-height、overflow-y: auto 或 height 去限制原生下拉弹出面板的高度。Chrome/Edge/macOS 下拉菜单由操作系统级 UI 组件渲染，不在 DOM 中，CSS 对它完全无效。开发者工具里看到的 <select> 只是个触发器，点击后弹出的真实列表不受你的样式影响。
常见误操作包括：
- 给
<select>加style="max-height: 150px; overflow: hidden;"—— 毫无作用 - 用
-webkit-appearance: none隐藏默认样式后以为能接管下拉区 —— 弹出部分依然系统托管 - 尝试
transform: scaleY()或position: absolute干预弹出位置 —— 大概率错位或失效
<select size> 是唯一合法的“伪滚动”控制方式
如果你只是想让用户在页面上看到一个固定行数、带原生滚动条的多选项框（不是点击才弹出的那种），那就用 size 属性：
<select size="5"> <option>选项一</option> <option>选项二</option> <option>选项三</option> <option>选项四</option> <option>选项五</option> <option>选项六</option> </select>
这个会强制显示 5 行，超出自动出现垂直滚动条。但它不是“下拉”，而是始终展开的列表框，语义和交互都不同。注意：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
size值必须是整数，设为1就退化成普通下拉（无滚动） - 它的高度由行高 ×
size决定，无法用height覆盖（现代浏览器会忽略） - 移动端 Safari 对
size支持不稳定，部分机型仍强制弹出全屏选择器
真要自定义滚动区域？必须用 JS 模拟 <select>
所有对滚动高度、滚动条样式、键盘导航、搜索过滤、焦点管理有要求的场景，都得放弃原生 <select>，手写一个基于 <div> + <ul> 的替代组件：
- 隐藏原生
<select>：用opacity: 0; position: absolute;覆盖但保留可访问性 - 用
<div class="custom-select">做按钮，点击时显示<ul class="dropdown-list"> - 给
.dropdown-list设max-height: 200px; overflow-y: auto;—— 这个才真正生效 - 必须监听
keydown处理ArrowDown/Enter等，否则键盘用户无法操作 - 别忘了
aria-expanded和aria-controls，否则屏幕阅读器会懵
滚动性能与兼容性容易被忽略的点
自定义下拉的滚动区域看似简单，但几个细节常导致卡顿或不可用：
- 不要用
top或margin-top控制下拉层位移 —— 触发重排，滚动卡顿；改用transform: translateY() - 移动端必须加
{ passive: false }到touchmove监听器，否则 iOS Safari 会静默忽略preventDefault()，导致页面跟着一起滚 -
overscroll-behavior-y: contain要加在容器上，防止下拉到底部时触发页面级弹性回弹 - 如果下拉内容动态加载，记得在
scrollHeight变化后手动重置scrollTop = 0，否则新内容可能被滚到看不见的位置
