最直接的方法是给外层div设置overflow-y: auto并限定max-height，pre内不设height，配合white-space: pre-wrap和-webkit-overflow-scrolling: touch提升体验。
给加overflow-y: auto是最直接的方法
页面局部滚动本质是让某个容器在内容超出时出现滚动条，而不是整个页面滚。关键不是“让代码块滚动”，而是控制它的父容器的溢出行为。
常见错误是直接对pre或code标签设overflow——它们默认是行内或无宽高约束的元素，不生效。必须包裹在一个有明确宽高的块级容器里，比如div。
-
div需设置固定高度（如height: 200px）或最大高度（max-height: 300px），否则overflow没参照系
-
overflow-y: auto比scroll更稳妥：只在需要时显示滚动条，避免空白占位
- 记得加
white-space: pre-wrap或pre-line，否则长代码行会撑破容器或被截断
- 若内容含内联代码（如
word-break: break-all防横向溢出
pre + code嵌套时的典型写法
展示代码片段时，常这样结构：pre负责滚动容器，code负责语义和基础样式。两者职责不能混。
下面这段能直接用：
<div style="max-height: 250px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px;">
<pre class="brush:php;toolbar:false;" style="margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.5;">
<code>function hello() {<br> console.log('world');<br>}</code>
overflow-y: auto是最直接的方法
页面局部滚动本质是让某个容器在内容超出时出现滚动条，而不是整个页面滚。关键不是“让代码块滚动”，而是控制它的父容器的溢出行为。
常见错误是直接对pre或code标签设overflow——它们默认是行内或无宽高约束的元素，不生效。必须包裹在一个有明确宽高的块级容器里，比如div。
-
div需设置固定高度（如height: 200px）或最大高度（max-height: 300px），否则overflow没参照系 -
overflow-y: auto比scroll更稳妥：只在需要时显示滚动条，避免空白占位 - 记得加
white-space: pre-wrap或pre-line，否则长代码行会撑破容器或被截断 - 若内容含内联代码（如
），需额外设word-break: break-all防横向溢出
pre + code嵌套时的典型写法
展示代码片段时，常这样结构：pre负责滚动容器，code负责语义和基础样式。两者职责不能混。
下面这段能直接用：
<div style="max-height: 250px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px;">
<pre class="brush:php;toolbar:false;" style="margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.5;">
<code>function hello() {<br> console.log('world');<br>}</code>
注意：pre内部不要设height，否则可能遮挡最后一行；div才是滚动控制主体。
移动端滚动卡顿？加-webkit-overflow-scrolling: touch
iOS Safari 和部分安卓 WebView 在局部滚动时默认不启用硬件加速，拖动生涩。仅需一行 CSS 就能修复：
- 只加在滚动容器上（即外层
div），不是pre或code - 现代浏览器已逐渐弃用，但 iOS 15 及更早版本仍依赖它
- 可安全加上，不影响其他平台：
style="-webkit-overflow-scrolling: touch;" - 如果同时用了
transform或will-change，反而可能干扰此属性，建议单独测试
滚动条太丑或想隐藏？用::-webkit-scrollbar微调
Chrome、Edge、Safari 支持伪元素定制滚动条，但仅限 WebKit 内核。Firefox 不支持，别指望全平台统一外观。
最小可用配置：
.scrollable-code {
overflow-y: auto;
}
.scrollable-code::-webkit-scrollbar {
width: 6px;
}
.scrollable-code::-webkit-scrollbar-track {
background: #f1f1f1;
}
.scrollable-code::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
重点提醒：这个伪元素只能作用于设置了overflow的块级元素本身，不能代理到子元素；且一旦父容器display是flex或grid，某些旧版 Safari 会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
