Does self-driven mode work inside a scroll container other than the window? #1
|
The component runs its own I would rather not fork the component just to swap the scroll root. |
Replies: 1 comment
|
No, self-driven mode is tied to the window viewport, so you need controlled mode there. The whole of self-driven progress is these three lines in const rect = sec.getBoundingClientRect();
const track = rect.height - innerHeight;
progressRef.current = track > 0 ? clamp01(-rect.top / track) : 0;
Use controlled mode instead. Pass const box = useRef(null);
const [p, setP] = useState(0);
useEffect(() => {
const el = box.current;
const onScroll = () => {
const track = el.scrollHeight - el.clientHeight;
setP(track > 0 ? Math.min(1, Math.max(0, el.scrollTop / track)) : 0);
};
onScroll();
el.addEventListener('scroll', onScroll, { passive: true });
return () => el.removeEventListener('scroll', onScroll);
}, []);
<div ref={box} style={{ overflow: 'auto' }}>
<ThermalReceipt progress={p} lines={lines} />
</div>No fork needed. When |
No, self-driven mode is tied to the window viewport, so you need controlled mode there.
The whole of self-driven progress is these three lines in
src/ThermalReceipt.tsx:getBoundingClientRect().topis measured against the viewport, not against the nearest scrolling ancestor, andinnerHeightis the window height. Inside a modal withoverflow: autoboth are wrong for you:rect.topbarely moves while the modal scrolls, andtrackis computed against a viewport that is taller than the box the receipt actually lives in. If the modal happens to be f…