infinite scrolling is not working working properly in throttling
when network connection are strong my reverse infinite scrolling is working fine but when I am using throttling it start pushing it to top without user interaction can anyone tell me why it happening and how can I solve this problem
With Throttling video :- reality.mp4
Without Throttling video :- expectation.mp4
code:-
https://github.com/pradeep800/chat-bot/blob/main/src/pages/%5Broomid%5D/index.tsx
GitHub
chat-bot/index.tsx at main ยท pradeep800/chat-bot
Contribute to pradeep800/chat-bot development by creating an account on GitHub.
4 Replies
Hi! ๐
It is most likely because of
scrollIntoView
: https://github.com/pradeep800/chat-bot/blob/main/src/pages/[roomid]/index.tsx#L149
https://github.com/pradeep800/chat-bot/blob/main/src/pages/[roomid]/index.tsx#L154
The options argument for scrollIntoView
has the default value start
for the block
property: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters
Try setting its value to nearest
or center
.Element: scrollIntoView() method - Web APIs | MDN
The Element interface's
scrollIntoView() method scrolls the element's ancestor
containers such that the element on which scrollIntoView() is called is
visible to the user.
GitHub
chat-bot/index.tsx at main ยท pradeep800/chat-bot
Contribute to pradeep800/chat-bot development by creating an account on GitHub.
hi
it seems like it is not working with adding value to nearest or center I think it is a problem with browser behavior whenever I scroll to the top it tries to stay at the top but idk how to remove this behavior any idea?
it seems like I have to do another intersection observer and one more useLayoutEffect that make that component so complex do you have any idea how I do this?
it is working fine it i am not scrolling it to top
If anyone reading this can you please help ๐
It is not working fine when i am scrolling to top