局部滚动条需容器设固定宽高+overflow属性，textarea需显式height/max-height+overflow-y:auto才生效，WebKit支持自定义滚动条，移动端需-webkit-overflow-scrolling:touch启用惯性滚动。

局部滚动条不是给整个页面加，而是让某个 <div> 或其他容器自己滚动，前提是它得“装不下内容”且明确告诉浏览器“溢出时别撑开，给我滚动条”。

必须设置固定宽高 + overflow

这是触发局部滚动的最小必要条件。没有尺寸限制，浏览器默认让内容自然延展，overflow 就没意义。

• width 和 height（或 max-height）缺一不可，用 %、vh、px 都行，但不能是 auto 或未声明
• overflow: auto 最稳妥：内容不溢出时不显示滚动条；overflow-y: scroll 会强制显示垂直滚动条（哪怕内容很短）
• 别对 body 或 html 设 overflow: hidden 后又想局部滚动——父级截断了，子级再怎么设也滚不动

textarea 的滚动条行为很特殊

textarea 是替换元素，它的滚动逻辑和普通 <div> 不同：即使不设 height，它也可能随内容自动拉长，但不会出现滚动条。

• 必须显式设置 height（或 max-height）+ overflow-y: auto 才能触发滚动
• input[type="text"] 完全不支持垂直滚动条，设了 overflow 也没用，文字会被裁剪
• iOS Safari 对 textarea 的 overflow-y: scroll 支持不稳定，推荐统一用 overflow-y: auto

自定义滚动条只在 WebKit 内核生效

::-webkit-scrollbar 系列伪元素仅被 Chrome、Edge、Safari（macOS）识别，Firefox 和 iOS Safari 基本无视。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 想改样式，只能针对 WebKit 写，例如：.box::-webkit-scrollbar { width: 6px; }
• Firefox 只支持 scrollbar-width: thin 和 scrollbar-color: #666 #eee，能力非常有限
• 不要试图用 @supports (scrollbar-width: thin) 包裹 WebKit 规则——它不生效，@supports 对伪元素无效

移动端惯性滚动需额外声明

在 iOS Safari 和部分安卓 WebView 中，局部容器默认没有滑动惯性，手指一抬就停，体验生硬。

• 加 -webkit-overflow-scrolling: touch 可启用原生级惯性滚动（注意：该属性已废弃，但目前仍被广泛支持）
• 现代写法倾向用 overscroll-behavior: contain 防止滚动穿透，但它不提供惯性
• 如果用了 position: fixed 或 transform，可能意外禁用惯性，需测试验证

最易忽略的是：容器父级的 display: flex 或 display: grid 在某些情况下会干扰子元素高度计算，导致 height 失效、滚动条不出——这时要检查父级是否加了 align-items: stretch 或未设 min-height。