用 scrollTop 控制局部容器滚动需满足 overflow-y: auto 和固定高度两个前提；通过修改 scrollTop 实现上下滚动、置顶置底，注意边界判断与 iOS Safari 中的异步更新问题。
用 scrollTop 控制局部容器滚动最直接
页面局部菜单栏（比如侧边导航、公告栏、分类标签区）要上下滚动，本质是让一个固定高度的 <div> 内部内容可垂直滑动。浏览器不滚动整个页面，只滚动这个盒子——核心就是操作它的 scrollTop 属性。
必须满足两个前提：overflow-y: auto（或 scroll） + 固定高度（height 或 max-height）。缺一不可，否则 scrollTop 读出来永远是 0，设了也无效。
- 获取容器：
const menu = document.getElementById("menu-list") - 向上滚一行：
menu.scrollTop -= 32（假设单行高 32px） - 向下滚一行：
menu.scrollTop += 32 - 滚动到顶部：
menu.scrollTop = 0 - 滚动到底部：
menu.scrollTop = menu.scrollHeight - menu.clientHeight
按钮点击时别忘了边界判断
用户连点“向下”按钮，滚到底就该停；点“向上”点到顶，也不该继续负向滚动。但仅靠 scrollTop === 0 判断顶部容易出错——某些 CSS 重置、iframe 嵌套或 zoom 缩放会让初始 scrollTop 不是整数，或者存在小数误差。
更稳妥的做法是用范围判断：
立即学习“前端免费学习笔记（深入）”；
- 顶部禁用条件：
menu.scrollTop （留 1px 容差） - 底部禁用条件：
menu.scrollTop >= menu.scrollHeight - menu.clientHeight - 1 - 按钮状态同步：
upBtn.disabled = menu.scrollTop ；<code>downBtn.disabled = menu.scrollTop >= menu.scrollHeight - menu.clientHeight - 1
scrollBy() 不能用于局部容器
很多人误以为 window.scrollBy() 也能用在某个 <div> 上，其实不行。scrollBy() 是 window 对象的方法，只作用于整个视口。对局部元素调用会报错：menu.scrollBy is not a function。
想实现“每次点一下滚一段”的效果，只能手动改 scrollTop：
- 向上步进：
menu.scrollTop = Math.max(0, menu.scrollTop - step) - 向下步进：
menu.scrollTop = Math.min(menu.scrollHeight - menu.clientHeight, menu.scrollTop + step) - 其中
step建议设为容器内单行高度，或menu.clientHeight / 4这类视觉舒适值
iOS Safari 中 scrollTop 可能延迟更新
在 iOS Safari（尤其是旧版）中，修改 scrollTop 后立即读取，有时仍返回旧值。这不是 bug，而是渲染管线异步导致的——DOM 更新了，但 layout 尚未完成。
如果后续逻辑依赖最新位置（比如自动禁用按钮），不要立刻读 scrollTop，加个微任务：
menu.scrollTop += stepPromise.resolve().then(() => { console.log(menu.scrollTop) })- 或者用
requestAnimationFrame确保 layout 完成后执行
这点在做“滚动到某项并高亮”类交互时特别关键，否则高亮位置会偏移一两行。
