0

I have list of posts that I am mapping on the screen, one after another. When I scroll down the list, it is appending new items to the bottom like on every social media site. The Site is jumping around on every append as the window height changes. How can I prevent that from happening ?

I tried to change the scroll position back on every screen resize manually. Like useEffect(()=>{ window.scrollTo(0,previousScrollYPosition) }, [height])

But somehow this didnt change anything.

It has probably something to do with the Posts. Posts have a tree like structure. So each post has an item in its object called sub. Sub have others subs and so forth... The are not possible to represent in a map function as it would work with just one depth. So I used like this.

<Item item={item}>
   {item.message}
   <Item message={item.child}/>
</Item>
  • Can you show some more code? Please make sure you include a [mre]. – code Nov 03 '22 at 20:02
  • Is that enough ? It is pretty much the code. The other stuff is just styling and quering the database – Alex Hofer Nov 03 '22 at 21:03
  • Thanks for editing. However, you want enough code so that other people can implement what you're doing without guessing. It'd probably be best if you can post your entire component and other related code. – code Nov 03 '22 at 21:24
  • Have you considered looking at the CSS side of your code ? If the site is jumping around, maybe it has something to do with the way your components are positionned. – Sebastien H. Nov 03 '22 at 22:01
  • Please provide enough code so others can better understand or reproduce the problem. – Community Nov 04 '22 at 07:29
  • I found a solution on https://stackoverflow.com/a/70936807/20411379 but the scrolling is a bit stiff now. Don't really know whether to count this a solution or a medioker workaround. – Alex Hofer Nov 05 '22 at 00:17

0 Answers0