fix(web): stop CBZ reader snapping/bouncing at chapter end on mixed-orientation books

This commit is contained in:
2026-09-08 22:42:05 +08:00
parent 90b39d4f97
commit 2e43cb2423
2 changed files with 47 additions and 10 deletions
+44 -10
View File
@@ -98,6 +98,8 @@ export default function CbzReader({ book, initialLocator, initialPercent, chrome
const curRef = useRef(0);
const shift = useRef(0); // 量高补偿按帧合并,避免一次加载多页各改一次 scrollTop
const shiftRaf = useRef(0);
const dragging = useRef(false); // 拖滚动条中:scrollTop 归浏览器管,JS 只补几何不抢方向盘
const estLearned = useRef(false); // 估高只学一次(见 measure)
const ratio = useRef(EST_RATIO); // 学到的页高比(同开本漫画一页量准,全程几何稳定)
const [continuous, setContinuous] = useStoredBool("cbz-continuous", false); // 连读:滑动可跨章
const [prefetch, setPrefetch] = useStoredPrefetch(); // 锁章预读章数 0–3
@@ -178,7 +180,18 @@ export default function CbzReader({ book, initialLocator, initialPercent, chrome
[],
);
useEffect(() => {
const up = () => (dragging.current = false);
window.addEventListener("pointerup", up);
window.addEventListener("pointercancel", up);
return () => {
window.removeEventListener("pointerup", up);
window.removeEventListener("pointercancel", up);
};
}, []);
function applyShift(d: number) {
if (dragging.current) return; // 拖拽中 JS 写 scrollTop 会和浏览器"滑块位置→滚动"映射抢方向盘
shift.current += d;
if (shiftRaf.current) return;
shiftRaf.current = requestAnimationFrame(() => {
@@ -251,18 +264,29 @@ export default function CbzReader({ book, initialLocator, initialPercent, chrome
function measure(i: number, h: number) {
const el = boxRef.current;
const topY = el ? el.scrollTop + anchor : 0; // 与 ph.offset 同处全局空间比较
const oldEst = ph.estHeight;
// anchor 一律现取:setEst 会改写窗外未量页前缀的高度,渲染闭包里的 anchor 同帧内即过期,
// 拿它换算 topY → keep 页算错数十页 → 重锚把视口弹飞 → 新页量高再触发翻转 = 章尾震荡
const aNow = ph.offset(w.start);
const topY = el ? el.scrollTop + aNow : 0; // 与 ph.offset 同处全局空间比较
const topOfI = ph.offset(i);
const d = ph.set(i, h);
if (el && d !== 0 && topOfI < topY) applyShift(d); // 视口上方页高变化 → 补偿滚动
// 让未量高页的估高收敛到实测页高:同开本漫画量一页后 d≈0,拖拽滚动条不再逐帧打架
if (width > 0 && Math.abs(h - oldEst) / oldEst > 0.03) {
const a0 = ph.offset(w.start); // 基线取当前实际 anchor:连续 measure 交错时闭包 anchor 可能过期,防前缀份额双扣
const n = ph.setEst(h, topY);
// n×Δest 是全局位移;锁章下窗外前缀页的那部分不影响窗口相对几何,须扣减
const corr = n * (h - oldEst) - (ph.offset(w.start) - a0);
if (el && corr) applyShift(corr);
// 让未量高页的估高收敛到实测页高。重估瞬间改写 contentH,浏览器会先把 scrollTop 夹断,
// 增量补偿在已坏的基线上算 → 章尾大量未量页时"到底后被重置到顶部"。
// 改为绝对重锚:钉住当前视口顶页在原屏幕位置,不依赖任何修正量。
// 估高只学一次:混开本(横竖版混排)书里"按最近一页重估"会让 est 反复翻转,
// 每次翻转都改写全部未量页几何(contentH ±16k 呼吸),拖滑块到底就是在这上面震荡。
// 学一次钉死后,后续每页量高只动自己那一格(≤单页高),几何单调稳定。
if (width > 0 && !estLearned.current) {
estLearned.current = true;
const keep = el ? ph.pageAt(topY) : 0;
let keepIn = el ? topY - ph.offset(keep) : 0;
ph.setEst(h, topY);
if (el && !dragging.current) {
keepIn = Math.min(keepIn, Math.max(0, ph.offset(keep + 1) - ph.offset(keep)));
shift.current = 0; // 增量补偿作废,重锚已含全部几何变化
el.scrollTop = ph.offset(keep) - ph.offset(w.start) + keepIn;
}
ratio.current = h / width;
}
bump((x) => x + 1);
@@ -280,7 +304,17 @@ export default function CbzReader({ book, initialLocator, initialPercent, chrome
e.preventDefault();
}}
>
<div ref={attachBox} onScroll={onScroll} onClick={onZoneClick} className="h-full overflow-y-auto">
<div
ref={attachBox}
onScroll={onScroll}
onClick={onZoneClick}
onPointerDown={(e) => {
const el = e.currentTarget;
const r = el.getBoundingClientRect();
if (e.clientX - r.left >= el.clientWidth || e.clientY - r.top >= el.clientHeight) dragging.current = true; // 按在滚动条上
}}
className="h-full overflow-y-auto"
>
<div className="relative mx-auto" style={{ height: contentH, maxWidth: MAX_W }}>
{Array.from({ length: Math.max(0, b - a) }, (_, k) => {
const i = a + k;