javascript - vue cannot maintain scroll position using keep-alive.

Question

Top view<router-view>Settings<keep-alive>Although the data can be cached and scrollTop is available, after using pull-up to load more data, click on a certain After returning to the item page, the scrollTop position of the previous page cannot be accurately recorded, and the deviation is relatively large. Sometimes it will return to the top. Have you ever had the same problem?

//自己稍微精准控制一下scrollTop，但是keep-alive还是按照缓存记录scrollTop滚动。
$("html,body").animate({scrollTop:this.scrollTopDistance},0);

Answer 1

I also encountered the same problem. I plan to use cache to store the position of the scroll bar on each page, and then take it out and set the position when returning to the page. But I feel like this method is so crude. I haven't found a better way yet, so I'm going to study it further.

The vue-router I just checked has a scrollBehavior function that can do it,

scrollBehavior: function (to, from, savedPosition) {

return savedPosition || { x: 0, y: 0 }

}, ready to take a look tomorrow