Skip to main content

So I’ve got a tab navigation bar which has horizontal scroll on and I have interactions where selecting a specific tab makes the bar scroll to the selected tab and change screens.


However, in the prototype, if you scroll and then press a tab, the scroll position keeps moving in the direction of the previous scroll, leaving a obvious empty space, which shouldn’t be there and if try scrolling will remove it.

What I want is to just have the bar scroll to the set position without leaving the empty space.


If I enable “reset scroll position” the end result is what I want, but it instead of leaving empty space, it makes the tabs jump and it just looks buggy.


You can view the file here: https://www.figma.com/design/mkEsPCWHQkXiYyn0DIkwWu/Horizontal-Scroll-Bug-(Copy)?node-id=0-1&node-type=canvas&t=Wzmff91dfSlOcb88-0


Hopefully the video explains it better;


Preserve scroll:



Reset scroll:



Is there a way to have an interactive scrolling element change scroll between screens in line with the scroll that’s been applied in prototype preview?

Be the first to reply!

Reply