夸克浏览器中 overflow: scroll 卡顿的根源是合成层策略保守，可靠解法为：scroll-container { overflow-y: auto; -webkit-overflow-scrolling: touch; contain: paint; scroll-behavior: smooth; backface-visibility: hidden; perspective: 1000; }，并用 requestAnimationFrame 替代 scrollend 监听滚动结束，同时避免 scroll 中触发重排重绘。
夸克浏览器中 overflow: scroll 滚动卡顿的典型表现
在夸克（基于 Chromium 11x+）里用原生 HTML5 滚动容器（比如 <div style="overflow-y: scroll; height: 300px">），手指滑动时出现“跳帧”“回弹生硬”“惯性滚动提前中断”，甚至触发 <code>scroll 事件频率骤降 —— 这不是 CSS 动画问题，而是夸克对非根滚动容器的合成层策略更保守，will-change: scroll-position 和 transform: translateZ(0) 基本无效。
强制启用硬件加速的可靠写法（非 hack）
夸克对 contain: paint + scroll-behavior: smooth 组合有隐式优化，但前提是滚动容器必须满足“可合成条件”。实测有效的最小配置如下：
scroll-container {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
contain: paint;
scroll-behavior: smooth;
/* 关键：触发独立图层，且不依赖 transform */
backface-visibility: hidden;
perspective: 1000;
}注意：-webkit-overflow-scrolling: touch 在夸克中仍被识别并影响滚动线程调度；backface-visibility: hidden 比 transform: translateZ(0) 更稳定，避免因父级 transform 干扰导致图层合并失效。
scrollend 事件不可靠？用 requestAnimationFrame 监听滚动结束
夸克对 scrollend 事件支持不稳定（尤其快速滑动后松手），常漏发或延迟 200ms+。真实业务中需降级处理：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听
scroll事件，每次触发时用cancelAnimationFrame清除上一次 pending - 在
requestAnimationFrame回调中判断lastScrollTop === scrollTop且持续 60ms 无变化 - 避免用
setTimeout，因夸克在后台标签页会节流定时器
示例逻辑（不依赖第三方库）：
let scrollTimer = null;
let lastScrollTop = 0;
<p>function handleScroll() {
lastScrollTop = element.scrollTop;
if (scrollTimer) cancelAnimationFrame(scrollTimer);
scrollTimer = requestAnimationFrame(() => {
if (element.scrollTop === lastScrollTop) {
// 视为滚动结束
onScrollEnd();
}
});
}</p><p>element.addEventListener('scroll', handleScroll);“顺滚”真正瓶颈往往在内容重绘而非滚动本身
很多开发者以为加了 will-change 就能解决，结果发现列表滚动还是卡——实际是每个滚动帧内触发了大量 getBoundingClientRect、offsetHeight 或 inline-style 修改。夸克的 JS 主线程调度比 Chrome 更激进，轻微阻塞就会导致滚动掉帧。
关键排查点：
- 检查是否在
scroll事件里直接读取 DOM 尺寸（如el.offsetHeight），应改用ResizeObserver预缓存 - 虚拟滚动组件是否在每次
scroll中重新计算所有 item 位置？应只 diff 可见区域 - CSS 中是否存在
box-shadow、filter: blur()等高开销属性，它们在夸克中重绘成本显著高于 Chrome
滚动流畅度最终取决于每帧能否在 8ms 内完成样式计算 + 布局 + 绘制。夸克没给开发者更多调试入口，所以得从源头压减重排重绘。
