Chat ux pagination with intersect
[here ] ( https://editor.nordcraft.com/projects/seno12/branches/start/components/test-scroll-up?canvas-height=800&canvas-width=800&selection=nodes.7xQPcxFd9K8K7aa2-mU_6&rightpanel=attributes ) , I am trying to build the logic of a chat with pagination . when I scroll up I want the new message to load , but without scrolling , i .e . my current view is not changed , but the messages are loaded at the top of the current message and I need to scroll up to view them . righ now , I cannot achieve this , and I immeidiately go to the top of the messages . anyone knows how to fix this ? thanks here is a [video ] ( https://vimeo.com/1089332063/e7b2658137?ts=0&share=copy ) that shows it hey @Filip Dajkovic thanks for the help . however I am not sure it is exactly what I was aiming for . so my only problem was that whwn I scroll up to the intersect , the new items are loaded immediately and the scrollbar goes to the top . while I want the behavior to be similar to [this example ] ( https://vimeo.com/1089452736/bb56af37ce?ts=0&share=copy ) , where the items are loaded but the scrollbar does not move up and it stays in the current item . not sure whether I failed to understand your example Thanks I 've shown the changes you should make , give it a shot and see if it works . You 'll also need to adjust the structure of the data a bit for it to work properly , but I think that it will get you to a better data structure /order , as with my solution , you 'll order items from latest to furthest (1 , 2 , 3 . . . ) , not the other way around like you had . I think that will help with pagination too and make it much more understandable . I tried implementing [it ] ( https://editor.nordcraft.com/projects/seno12/branches/start/components/test-scroll-up?canvas-height=800&canvas-width=800&selection=nodes.JM76ZE3i1Qb3ruPSAlbG4&rightpanel=style ) , but I probably did not manageto do it as expected I guess @Filip Dajkovic indeed it 's working . dont know why but I had not set the height = 100 % or sth . sorry for the misunderstanding one last thing . I set the root -margin = 128px 128px and even tried 256px but it still loads only when I reach the absolute top . any idea how to make intersect trigger earlier ? I can do this when I dont have this reverse feature , but here I cannot seem to find it I 'm glad it 's working ! I don 't have much experience with Intersection observer , somebody else could probably help better with that , but what I 'd try is wrapping your list (ul ) inside another div and placing intersection observer inside that div too , making it (observer ) absolute and setting top (inset -top ) position to be 128px or whatever value you want to 👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1👍1
.jpeg/public)