容器需设固定高度（如300px）并配overflow-y: auto才能实现局部滚动；隐藏滚动条需用::-webkit-scrollbar{display:none}、-ms-overflow-style:none和scrollbar-width:none；子元素须保持常规文档流，避免flex/absolute导致高度计算失效。
给容器设固定高度 + overflow-y: auto
局部区域上下滚动，本质是让某个 <div> 自己管自己的滚动，不带动整个页面。关键前提是：它必须有明确的尺寸约束，否则浏览器无法判断“哪里该滚、滚多少”。
最简配置如下：
.scroll-area {
height: 300px;
overflow-y: auto;
overflow-x: hidden;
}-
height必须是具体值（px、rem或vh），百分比在父元素没高度时会失效 -
overflow-y: auto表示只在内容超长时显示纵向滚动条；用scroll会强制显示（即使没溢出） -
overflow-x: hidden防止意外横向滚动（比如内联元素换行撑宽）
隐藏滚动条但保留滚动功能
很多设计要求“能滚，但看不见滚动条”，尤其在公告栏、弹窗列表等场景。滚动条本身是浏览器 UA 样式，不能直接 display: none，得用伪元素覆盖。
主流方案（Chrome/Safari/Firefox 支持）：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.scroll-area::-webkit-scrollbar {
display: none;
}
.scroll-area {
-ms-overflow-style: none; /* IE/Edge */
scrollbar-width: none; /* Firefox */
}-
::-webkit-scrollbar在非 WebKit 浏览器里被忽略，安全；设display: none是最可靠隐藏方式 -
-ms-overflow-style: none对旧 Edge 有效；scrollbar-width: none是 Firefox 64+ 的标准写法 - 隐藏后仍可鼠标滚轮、触摸板滑动、键盘方向键操作，功能不受影响
滚动区域内容不撑高容器
常见错误：加了 height 和 overflow-y: auto，但内容还是把容器顶开，滚动条不出现。大概率是子元素用了 display: flex、position: absolute 或 float，导致脱离文档流，高度计算失效。
- 确保子元素是常规流布局（
display: block或inline-block） - 避免对子元素设
height: 100%，容易触发循环依赖 - 若用 Flex 布局，父容器需加
flex-shrink: 0防止被压缩，子项加overflow-y: auto反而更可控 - 调试时右键检查元素，看 computed height 是否等于你设的值；如果不是，说明内容没被包裹住
用 scrollTop 控制滚动位置（JS 场景）
当需要程序化滚动（比如点击按钮跳到某条记录、自动滚动到底部），必须操作容器的 scrollTop 属性，而不是 window.scrollTo() —— 后者滚动的是整个页面。
示例：滚动到最底部
const el = document.querySelector('.scroll-area');
el.scrollTop = el.scrollHeight - el.clientHeight;-
scrollHeight是内容总高度（含不可见部分） -
clientHeight是容器可视区高度（不含滚动条） - 赋值前确保 DOM 已就绪，否则
scrollHeight可能为 0 - 在 Vue/React 中，注意 ref 绑定时机，别在组件挂载前读取
滚动行为是否生效，最终取决于「容器是否有高度约束」和「内容是否真实溢出」——这两点卡住了，后面所有样式或 JS 都白搭。先用 DevTools 检查 computed height 和 scrollHeight，比反复调 CSS 更快定位问题。
