原生 不支持虚拟滚动，因其渲染为黑盒、无法监听滚动或动态加载；必须改用自定义下拉组件，结合虚拟列表与可搜索弹层实现高性能大数据量选择。

原生 <select></select> 标签不支持虚拟滚动，无法直接处理成百上千甚至上万条选项。要实现大数据量下拉的虚拟滚动效果，必须放弃原生 select，改用自定义下拉组件（即“虚拟列表 + 可搜索弹层”组合）。

为什么原生 select 不行

浏览器对 <select></select> 的渲染和 DOM 管理是黑盒，不暴露滚动容器、不支持动态加载、无法监听滚动位置，也无法只渲染可视区域内的选项。即使强行塞入 10000 个 <option></option>，也会导致页面卡顿、内存飙升、首次展开延迟明显。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

核心思路：自定义下拉 + 虚拟列表

用一个输入框（或按钮）触发弹层，弹层内用 <div> 模拟下拉区域，并基于滚动高度、可视区尺寸、数据总长，实时计算并只渲染当前可见的 10~20 条选项（加前后缓冲区），同时保持滚动条自然可拖动。 <ul> <li>用 <code>position: absolute + transform: translateY() 定位每一项，避免重排

通过 scrollTop 和元素高度反推起始索引，再 slice 出当前页数据

外层容器设固定高度和 overflow-y: auto，滚动事件中节流更新渲染

配合键盘导航（↑↓/Enter/ESC）和鼠标 hover 高亮，提升可用性

轻量级实现建议（不依赖框架）

若项目未用 React/Vue，可用纯 JS + CSS 快速搭建：

• HTML 结构：一个 <input type="text" readonly> 作为触发器，一个 <div class="dropdown-panel"> 作为浮层 <li>CSS 关键：面板用 <code>max-height: 300px; overflow-y: auto;；选项用 position: relative，通过 top 或 transform 偏移模拟位置
• JS 关键：监听 scroll，用 Math.floor(panel.scrollTop / itemHeight) 算出首项索引，再生成 DOM 片段（或用 innerHTML 批量写入）
• 增强体验：加防抖搜索过滤、空状态提示、加载中骨架、键盘焦点管理

推荐现成方案（省心稳定）

生产环境建议使用成熟库，兼顾性能、可访问性和维护性：

• React：用 react-window 或 react-virtualized-select（已归档但稳定）
• Vue：用 vue-virtual-scroller 封装下拉，或搭配 Element Plus 的 el-select（开启 filterable + remote + virtual-scroll）
• 通用轻量方案：用 tomkp/react-autosize-textarea 类思路改造，或直接集成 react-tiny-virtual-list + 自定义弹层