要查看已上传的文件，必须在上传成功后将文件信息渲染为dom节点并放入设定了height和overflow-y:auto的容器中，否则滚动条无内容可滚。
拖动滚动条本身不会“查看已上传的文件”——它只是滚动页面，和文件上传状态无关。真正要实现“查看已上传的文件”，得靠前端维护一个已上传成功的文件列表，并渲染成 DOM 元素（比如 <li> 或 <div>），滚动条才会有东西可滚。
<h3>为什么滚动条动了但看不到已上传文件</h3>
<p>常见现象是：文件上传成功了，控制台也打印了响应，但页面上没显示任何内容，拖动滚动条也没用。根本原因是：<strong>你没把上传结果渲染到页面上</strong>，DOM 里压根没有那些文件项，滚动区域自然空空如也。</p>
<ul>
<li>上传成功后只调了 <code>console.log 或 alert，没操作 document
fetch().then() 外层，没等异步完成就执行）<div id="file-list">）缺少 <code>height 和 overflow-y: auto，导致内容溢出但不可滚动
如何让“已上传文件”可滚动查看
关键不是控制滚动条，而是让文件列表具备可滚动的容器结构，并确保每次上传成功后追加真实 DOM 节点。
- 给文件列表容器设固定高度和滚动样式：
style="height: 300px; overflow-y: auto;" - 每次
fetch或XMLHttpRequest成功后，用document.createElement创建新项，再appendChild到容器中 - 避免直接用
innerHTML +=，会重绘全部子节点；优先用append()或insertAdjacentElement() - 如果文件很多，考虑虚拟滚动（不在此展开），但几十个以内直接渲染完全没问题
上传成功后怎么安全追加 DOM 节点
别在 drop 事件里直接渲染——那是拖入时刻，还没上传完。必须等服务器返回确认成功，再更新 UI。
- 在
fetch('/upload', { method: 'POST', body: formData })的.then(response => response.json())回调里处理渲染 - 检查响应是否真成功：
if (response.success) { appendFileItem(response.filename, response.size) } -
appendFileItem函数内部创建<div class="uploaded-file"> <span>xxx.jpg</span><small>2.4 MB</small> </div>并插入容器 - 上传失败时也要反馈（比如加红色提示），否则用户会以为“没反应=没传”，反复拖拽
最常被忽略的一点：容器没设置 overflow-y: auto 却指望滚动条出现；或者上传逻辑和渲染逻辑被拆得太散，导致“上传完成了，但页面不知道”。滚动条只是表象，背后是数据流和 DOM 更新是否闭环。
