根本原因是浏览器默认以html为滚动容器，局部容器未禁用全局滚动且高度未明确设置；需设html/body{overflow-y:hidden;height:100%}，局部容器显式设固定高度+overflow-y:auto，并拦截wheel事件防止穿透。
为什么局部滚动容器不生效，却看到整个页面在滚
根本原因是：浏览器默认滚动容器是 html 元素，只要内容高度超过视口，html 就会生成全局滚动条。即使你给某个 .card-body 设置了 overflow-y: auto，它确实能滚，但用户鼠标滚轮或触摸板仍可能触发父级（html）的滚动，尤其当局部容器未填满视口、顶部/底部留白时。
解决思路不是“加滚动”，而是“锁住不该滚的部分”：
- 给
html和body同时设overflow-y: hidden，彻底禁用全局垂直滚动 - 确保
html, body { height: 100% }，否则子元素的height: 100%会失效 - 目标局部容器（如
.chat-log）必须显式设固定高度（如height: 400px）+overflow-y: auto - 若局部容器本身是 flex 子项，还需确认其父容器未设
overflow: hidden或flex-shrink: 0导致高度塌陷
如何让局部滚动容器响应鼠标滚轮，且不穿透到页面
默认情况下，局部容器内滚动到底部/顶部后，滚轮事件会“冒泡”到父容器，最终触发 html 滚动——这就是“穿透”现象。要截断它，不能只靠 CSS。
关键操作是监听局部容器的 wheel 事件，并在到达边界时调用 e.preventDefault()：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const chatLog = document.querySelector('.chat-log');
chatLog.addEventListener('wheel', (e) => {
const { scrollTop, scrollHeight, clientHeight } = chatLog;
const atTop = scrollTop === 0;
const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
<p>if ((e.deltaY < 0 && atTop) || (e.deltaY > 0 && atBottom)) {
e.preventDefault();
}
});注意点：
- 不要用
touchmove的preventDefault来处理触摸滚动——这会直接禁用所有触摸行为，包括点击 - 移动端 Safari 对
wheel支持有限，更可靠的方式是监听scroll事件 +requestAnimationFrame做边界检测 - 若容器使用了
transform或will-change，可能影响滚动事件触发时机，需测试
局部滚动启用平滑滚动（scroll-behavior: smooth）的正确写法
scroll-behavior: smooth 只对“当前滚动容器”生效，且必须显式设置在其上，不会继承。很多人误写在 body 上，结果无效。
正确做法：
- 对局部容器（如
.timeline），直接加：.timeline { height: 300px; overflow-x: auto; scroll-behavior: smooth; } - 确保该容器内有可滚动内容（比如超宽的
div或table），且真实溢出——仅设overflow-x: auto不够 - 调用
element.scrollIntoView({ behavior: 'smooth' })时，target 元素必须已渲染、未被display: none或visibility: hidden隐藏 - Firefox 不支持局部容器上的
scroll-behavior，只能靠 JS 模拟（如scrollTo配合ease-in-out定时器）
移动端 Safari 局部滚动卡顿、无法拖拽的常见原因
iOS Safari 对局部滚动容器有额外限制，不是 CSS 写错，而是触发条件没满足：
- 容器必须有
-webkit-overflow-scrolling: touch（iOS 15+ 已非必需，但老版本仍需） - 避免在局部容器上同时设
transform和overflow，Safari 会降级为非硬件加速滚动 - 若容器父级用了
position: fixed或backdrop-filter，可能破坏滚动层合成，导致卡顿 - 滚动区域内的图片未设
height或使用懒加载（loading="lazy"），会导致布局抖动和滚动中断
真正容易被忽略的是：局部滚动是否真的需要“完全独立”。很多时候，与其强行锁死 html 滚动，不如用 position: sticky + 自然文档流实现类似效果，既兼容又省力。
