I have prepared this demo which transitions from one page to another using react-spring and there is this height offset. When you scroll down on page 1 and click on an item, page 2 loads too high. How is this problem called in webdev? I can't find any posts about it.
Asked
Active
Viewed 55 times
0
ablaszkiewicz1
- 855
- 1
- 10
- 26
1 Answers
0
You can scroll to the top at every page change. All you must do is calling this:
window.scrollTo(0, 0);
UPDATE:
You either call it somehow between page transitions, when one page is already disappeared and the other is not rendered yet.
Or you can call it at the end with smooth scrolling for example with react spring. Something like this, I do not tried it yet. (it is from react-spring example)
const props = useSpring({ scroll: 0, from: { scroll: actualPosition } })
return <animated.div scrollTop={props.scroll} />
Peter Ambruzs
- 7,763
- 3
- 30
- 36
-
Yeah but this would lead to strange instant scroll of the page which is leaving the window – ablaszkiewicz1 Jul 03 '20 at 12:29
-
Yeah that's the tricky part when to call it. But without source code its hard to advise you. – Peter Ambruzs Jul 03 '20 at 13:14