局部滚动在手机上“点得中、滑不动”的根本原因是viewport meta标签缺失initial-scale=1.0或未启用-webkit-overflow-scrolling: touch；前者导致touchstart坐标计算错误，后者使滚动无惯性且卡顿。
局部滚动在手机上“点得中、滑不动”，90% 是 viewport 写错或 -webkit-overflow-scrolling: touch 缺失。
viewport meta 标签必须同时含 width=device-width 和 initial-scale=1.0
只写 width=device-width 会导致 iOS Safari 按 980px 默认宽度渲染，touchstart 坐标计算错误——你手指点对了位置，但滚动事件没触发。Android WebView 同样会闪一次默认渲染再重绘，滚动逻辑初始化失败。
-
user-scalable=no要慎用：横屏时若未监听orientationchange或resize重设容器高度，滚动区域会被截断 - meta 标签必须放在
<head>最前面，不能在<link rel="stylesheet">之后，否则部分 Android WebView 会先按无 viewport 渲染一次 - 常见错误写法：
<meta name="viewport" content="width=device-width">（漏掉initial-scale=1.0）
-webkit-overflow-scrolling: touch 不是可选项，是 iOS/Android 必开开关
没有它，overflow-y: auto 在 iOS Safari 和旧版 Android Chrome 中表现为“卡顿滚动”或“完全不惯性滑动”。这个属性虽被标记 deprecated，但截至 2026 年仍是唯一可靠方式。
- 仅对
position: relative、absolute或fixed容器生效；static容器下可能被忽略 - 不能和
transform: translateZ(0)或will-change: transform混用，否则在 iOS 16+ 上触发渲染层分裂，反而卡顿 - 若容器有
border-radius，需额外加overflow: hidden，否则圆角内内容会溢出
局部滚动容器的尺寸必须固定且响应式
移动端屏幕宽度变化频繁，靠百分比或 vh 设置高度容易失效。比如 height: 50vh 在 iOS Safari 横屏切换后不更新，导致滚动区域变矮甚至消失。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
max-height+min-height组合，例如：max-height: 60vh; min-height: 200px; - 避免用
height: 100%，除非父级明确设了height且不依赖视口变化 - 小屏下建议加
@media (max-width: 480px)单独设max-height: 300px，防止键盘弹出时遮挡内容
iOS Safari 的滚动条和 touch 行为要单独处理
iOS Safari 完全不支持 ::-webkit-scrollbar，任何自定义滚动条样式都会被静默忽略。强行写只会增加维护成本，还影响可访问性。
- 不要试图隐藏滚动条：iOS 下
overflow: -webkit-scrollbar { display: none; }无效，也不该用 JS 模拟滚动 - 滚动区域内的
input获取焦点时，务必调用element.scrollIntoView({block: 'nearest'})，否则软键盘可能遮住输入框 - 避免在滚动容器内嵌套
iframe或canvas，它们可能拦截 touch 事件，导致外层滚动失效
最易被忽略的是 viewport 初始化时机和 -webkit-overflow-scrolling 的定位依赖——这两个条件缺一不可，且顺序不能颠倒。真机测试时，优先用 iPhone 实测 touch 响应，而不是依赖 Chrome DevTools 的模拟器。
