要实现区域独立滚动，需显式设置max-height、overflow-y: auto，并确保父容器无overflow: hidden；flex布局中注意min-height: 0；移动端酌情加-webkit-overflow-scrolling: touch；自定义滚动条优先用scrollbar-width/color，禁用display: none隐藏；锚点跳转需js调用scrollintoview；避免fixed定位、未设宽高的图片及不当transform引发卡顿或模糊。
怎么让 article 或 div 区域独立滚动
不是给整个页面加滚动，而是限定某一块内容（比如知识库正文、代码示例区、日志列表）自己滚，其他区域固定不动。关键在于：**设高度 + overflow-y: auto + 不继承父级溢出行为**。
-
height或max-height必须显式设置，否则overflow无效；推荐用max-height避免内容少时留白过多 - 父容器不能有
overflow: hidden或overflow: clip，否则子级滚动会被裁掉 - 如果用了 Flex 布局，确保该区域的 flex 项没被设成
min-height: 0以外的限制（某些框架默认加了） - 移动端需加
-webkit-overflow-scrolling: touch（iOS Safari 旧版），但现代 iOS 已不强制需要
滚动条样式怎么统一且不崩
默认滚动条丑、跨平台不一致，但直接删掉又影响可用性。自定义要兼顾可访问性和兼容性，别只图好看。
- 仅支持 WebKit 内核（Chrome/Safari/Edge）：
::-webkit-scrollbar系列伪元素可调宽度、背景、滑块色；Firefox 和旧 IE 完全不认 -
scrollbar-width（Firefox）和scrollbar-color是目前唯一跨引擎的 CSS 方案，但仅控制颜色和粗细，不支持圆角或阴影 - 别用
display: none隐藏滚动条——这会让键盘用户（Tab 导航）和屏幕阅读器彻底失去滚动能力 - 若真要“无感滚动条”，可用
overflow: overlay（已废弃）或靠 JS 模拟，但代价是破坏原生滚动惯性、手势支持和辅助功能
局部滚动时内部锚点跳转失效怎么办
给局部滚动容器里的 <h2 id="section1"></h2> 加链接 #section1，点击后页面没滚动到对应位置——因为浏览器默认只在 document 根层找锚点，不进子容器。
- 必须用 JavaScript 手动滚动：
element.scrollIntoView({ block: 'start', behavior: 'smooth' })，目标元素得在该局部容器内 - 监听
hashchange事件，解析window.location.hash，再查找到对应id元素并调用scrollIntoView - 注意：
scrollIntoView的block值在局部容器中意义不同，'start'是相对容器顶部，不是视口顶部 - 如果容器用了
transform或will-change，可能触发新的层叠上下文，导致scrollIntoView偏移，此时需临时移除再恢复
滚动卡顿或文字模糊的常见原因
局部滚动区内容一多就掉帧，尤其含图片、动画或大量 inline-block 元素时，不是性能差，而是渲染策略错了。
- 避免在滚动容器内放
position: fixed元素——它会强制重绘整个容器，iOS 上尤其明显 - 图片没设
width/height属性会导致回流，滚动中反复计算布局；用aspect-ratio或 padding-bottom hack 预留空间 - CSS 动画别写在滚动容器子元素上（如
.item:hover { transform: scale(1.05) }），hover 触发重排；改用will-change: transform提前升层 - 文字模糊常因父容器用了
transform: translateZ(0)或backface-visibility: hidden却没配-webkit-font-smoothing: antialiased，macOS/Safari 下特别明显
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
