<p>页面局部滚动需设固定高度（height/max-height）+ overflow-y: auto；max-height更优；Flex/Grid中父容器需有高度约束；WebKit下用::-webkit-scrollbar优化滚动条；移动端需加touch-action: pan-y；触底判断宜用Math.abs(scrollTop + clientHeight - scrollHeight)。</p>
给容器设固定高度 + overflow-y: auto
页面局部滚动的本质，是让某个子容器「自己管自己的滚动」，不牵连整个页面。最直接的办法就是给它加固定高度（height 或 max-height）和 overflow-y: auto。
注意不能只写 overflow: auto —— 如果内容水平超长，会意外触发横向滚动条；而 overflow-y 只控制垂直方向，更精准。
- 必须设置
height或max-height，否则容器高度随内容撑开，滚动条永远不会出现 -
max-height更常用：内容少时不出现滚动条，内容多时才启用，体验更自然 - 在 Flex 或 Grid 布局中，父容器需有明确高度约束（比如
flex: 1或height: 100%），否则子容器的max-height可能失效
避免滚动条遮挡内容（特别是 WebKit 内核）
Chrome/Safari 默认的滚动条会占位，导致右边内容被挤窄或换行。用 ::-webkit-scrollbar 隐藏或缩窄它，但要注意：隐藏后用户可能找不到滚动线索。
推荐折中方案：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 保留滚动条轨道，仅隐藏滑块：
::-webkit-scrollbar { width: 6px; }+::-webkit-scrollbar-thumb { display: none; } - 或用透明滑块：
background: rgba(0,0,0,0.1)，既不突兀又提供拖拽反馈 - Firefox 不支持
::-webkit-scrollbar，如需兼容，得用 JS 滚动库（如simplebar）或接受原生表现
移动端 touch 滚动卡顿或失效
iOS Safari 和部分安卓 WebView 中，局部滚动容器默认不响应 touchmove，表现为“点不动”“拖一下就停”。根本原因是浏览器把 touch 事件优先分发给了外层页面。
解决方法很简单，但容易漏：
- 给滚动容器加
touch-action: pan-y;—— 明确告诉浏览器：“这个区域只允许纵向拖拽” - 确保没有父元素设置了
touch-action: none或preventDefault()干预了事件流 - 如果用了
position: fixed或transform，某些旧版 WebView 会禁用硬件加速滚动，可加will-change: scroll-position;强制启用
滚动到底部自动加载时 scrollTop 判断不准
监听 scroll 事件判断是否触底，常因容器内边距、边框、子元素 margin 折叠等导致 scrollTop + clientHeight === scrollHeight 判断失败。
更稳的做法：
- 用
Math.abs(scrollTop + clientHeight - scrollHeight) 替代严格相等，容忍像素级误差 - 在
scroll事件里节流（比如用requestAnimationFrame包一层），避免高频触发重复请求 - 如果容器是动态渲染的（比如 Vue/React 更新后），记得在 DOM 渲染完成后再读取
scrollHeight，否则可能拿的是旧值
滚动行为本身简单，但真实项目里出问题，八成卡在「高度没约束」「touch-action 没配」「scroll 事件时机不对」这三处。尤其嵌套滚动场景下，父容器的 overscroll-behavior 设置也会影响子容器回弹表现，这点常被忽略。
