Scroll into view on tap if needed

This commit is contained in:
Dan Abramov
2024-11-30 20:20:14 +00:00
parent acc52c14d3
commit e291ae008e
+21 -3
View File
@@ -144,13 +144,31 @@ export function TabBar({
if (isSyncingScroll.get() === true) { if (isSyncingScroll.get() === true) {
const progressDiff = index - dragProgress.get() const progressDiff = index - dragProgress.get()
const offsetDiff = progressToOffset(progressDiff) const offsetDiff = progressToOffset(progressDiff)
// TODO: Get into view if obscured let offset = scrollX.get() + offsetDiff
const offset = scrollX.get() + offsetDiff const itemLayout = layouts.get()[index]
if (itemLayout) {
if (
itemLayout.x < offset ||
itemLayout.x + itemLayout.width > offset + containerSize.get()
) {
// If the proposed offset is still out of view, don't bother with
// proportional scroll and ensure the target is scrolled into view.
offset = progressToOffset(index)
}
}
scrollTo(scrollElRef, offset, 0, true) scrollTo(scrollElRef, offset, 0, true)
} }
isSyncingScroll.set(true) isSyncingScroll.set(true)
}, },
[isSyncingScroll, scrollElRef, scrollX, dragProgress, progressToOffset], [
isSyncingScroll,
scrollElRef,
scrollX,
dragProgress,
progressToOffset,
containerSize,
layouts,
],
) )
const onItemLayout = useCallback( const onItemLayout = useCallback(