Scroll Behaviour

[mwasigala]

I have a list within the tab, i want to remember the position of the list as i navigate.... please help its urgent
Sorry i didn't see an option to submit a question

[bhuh12]

https://router.vuejs.org/guide/advanced/scroll-behavior.html

[mwasigala]

I have done so and it's not working with router tab when I scroll a list then I navigate to other tab then return back to the. List it doesn't show from the last position

[bhuh12]

Presumably the scroll element is not specified

scrollBehavior (to, from, savedPosition) {
   if (to.meta.scrollElement) {
     return {
       selector: to.meta.scrollElement
     }
   }
}

Reference:
https://router.vuejs.org/guide/advanced/scroll-behavior.html
https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js

[mwasigala]

I think this has all to do with how i define my tabs... with the :tabs attribute (default tabs);
because i have tried it in a normal tabs without using attributes it works ,
The above solution doesn't help my list is dynamic and list elements are created on fly..,

[bhuh12]

Is it the tab list or the content on the page that has the problem with scroll positioning?

[mwasigala]

The list content within the tab

[bhuh12]

Can you provide screenshots, screen recordings, or code to reproduce the problem?

[mwasigala]

Before navigation

After Scrolling

Navigating back to the Tab again

It is as if the page doesn't save the scroll position

[bhuh12]

RouterTab does not save the scrolling position of the page, because the 'scrollbehavior' provided by vue-router implements this function.

If the page data will be reloaded when the tab is activated, you may need to implement it yourself

1. When "deactivated", record the scrolling position of the scroll element

2. When "activated", set the recorded scroll position to the scroll element after the page data is updated

[mwasigala]

@bhuh12 okay thanks for the info

[bhuh12]

v1.2.6 already supports this feature.

Doc: https://bhuh12.github.io/vue-router-tab/guide/custom/scroll.html
Demo: https://bhuh12.github.io/vue-router-tab/demo/#/page-scroller/

This version provides component syntax hints for the Vetur extension, welcome to update and experience.

Changelog: https://bhuh12.github.io/vue-router-tab/guide/changelog.html