局部滚动容器无法启用原生回弹效果，因该行为仅限根滚动容器（html）且由系统控制；伪回弹需JS拦截touch事件、用transform模拟弹性并配合弹簧动画实现。
局部滚动容器怎么启用“回弹”效果
HTML 本身不提供局部滚动的弹性反弹（overscroll bounce），所谓“回弹”是 iOS/Android 原生滚动层的行为，**只作用于根滚动容器（html）**。当你给一个 div 设了 overflow-y: auto，它就变成内滚容器，系统默认禁用回弹——这是设计使然，不是 bug。
所以“局部滚动边界反弹”的真实含义，其实是：让这个 div 在用户拖到顶/底时，**视觉上模拟出类似原生根滚动的弹性反馈**。这只能靠 JS 拦截 + transform 补偿实现，CSS 无解。
为什么 overscroll-behavior: contain 不起回弹作用
overscroll-behavior 的作用是「切断滚动链」，不是「开启回弹」。它只控制是否把过度滚动传递给父级，对当前容器自身的滚动行为毫无影响。
-
overscroll-behavior: contain→ 滚到底不传给 body，但本体依然硬停，无弹性 -
overscroll-behavior: none→ 同样不传，也不反弹 -
overscroll-behavior: auto（默认）→ 可能触发父级滚动，但本体还是没回弹
想看到回弹，必须满足两个条件：容器是根滚动容器（即 html），且运行在支持该行为的系统上（iOS Safari、Chrome for Android）。局部 div 永远不满足第一条。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
用 touchstart/touchmove 模拟回弹的实操要点
真要给局部容器加“伪回弹”，核心思路是：监听 touch 移动，在到达边界时允许超出，并用 transform: translateY() 拉伸容器内容，松手后用 spring 动画回弹。关键不是写动画，而是边界判断和阻尼系数。
- 必须先
event.preventDefault()在touchmove，否则浏览器会优先执行原生滚动（导致抖动或失效） - 边界判断不能只看
scrollTop === 0或scrollTop >= scrollHeight - clientHeight，要引入缓冲阈值（如 ±30px）才自然 - 回弹动画推荐用
ease-out或 CSSspring(250, 20)（Chrome/Edge 支持），避免linear显得机械 - 务必在
touchend中重置transform，否则后续滚动坐标错乱；可配合requestAnimationFrame平滑还原 - Android WebView 和旧版 Safari 对
transform+scroll混合操作兼容性差，建议加 UA 判断降级为硬停
更轻量的替代方案：放弃回弹，专注体验连贯性
多数业务场景下，“回弹”只是心理暗示，真正影响体验的是滚动是否卡顿、边界是否突兀、内容是否跳动。与其花大力气模拟回弹，不如做这几件事：
- 给局部容器加
-webkit-overflow-scrolling: touch（仅 iOS 12+ 有效），它虽不能恢复回弹，但能提升滚动帧率，减少卡顿感 - 用
scroll-snap-type: y mandatory配合scroll-snap-align: start，让每次滚动“吸附”到区块顶部，降低误操作概率 - 在滚动到底部时，用
padding-bottom: 40px留白，配合::after加载提示，让用户明确“已到底”，比强行拉伸更可信 - 禁用双指缩放（
touch-action: pan-y）防止误触发 zoom，这对局部滚动容器尤其重要
真正的滚动回弹是操作系统级特权，只给 html。试图在 div 上复刻它，等于在浏览器渲染管线外另建一套物理引擎——投入产出比极低。优先保障滚动流畅、边界明确、交互可预期，比“看起来像原生”更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
