fix(web): stop CBZ reader snapping/bouncing at chapter end on mixed-orientation books
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user