当点击特定的口袋妖怪时,用户可以显示口袋妖怪的详细信息。当用户单击后退按钮查看所有口袋妖怪时,我希望他们继续在完全相同的滚动位置/口袋妖怪,即他们第一次单击的位置。如何实现这个next.js使用无限滚动抓取API分页?显示上次访问相同数据的解决方案!
mspsb9vt1#
在Next.js中使用无限滚动来保持滚动位置的一种方法是使用React的state和window.scrollY属性。当用户点击Pokemon时,将当前滚动位置保存在状态变量中。然后,当用户返回导航时,使用useEffect钩子从状态恢复滚动位置。对于无限滚动,请考虑使用IntersectionObserver API。它可以帮助您确定何时到达列表的末尾,需要获取下一页数据。
window.scrollY
useEffect
1条答案
按热度按时间mspsb9vt1#
在Next.js中使用无限滚动来保持滚动位置的一种方法是使用React的state和
window.scrollY
属性。当用户点击Pokemon时,将当前滚动位置保存在状态变量中。然后,当用户返回导航时,使用useEffect
钩子从状态恢复滚动位置。对于无限滚动,请考虑使用IntersectionObserver API。它可以帮助您确定何时到达列表的末尾,需要获取下一页数据。