search

Jacobs63 / vue3-tabs-component

Vue 3 tabs component
MIT License
96 stars 27 forks source link

Landing from another page will scroll to section #22

Closed ZsharE closed 2 years ago

ZsharE commented 2 years ago

When you create some tabs you will need to specify the name for each tab. This will add an id for each tab, which is similar with the name provided. In the example below, the profile tab will have the id #profile, security tab will have the id #security, and so on. So far good. When you land from another application page to a page that contains tabs, and you specify the #hash in the URL or not (but the defaultTabHash is set), the page will scroll to that section (which is perfectly normal).

<div class="tabs-wrapper">
    <tabs ref="tabsRef" :options="{ defaultTabHash: 'security' }" :cache-lifetime="-1" wrapper-class="tab-content">
        <tab name="Profile" panel-class="tab-pane">...</tab>
        <tab name="Security" panel-class="tab-pane">...</tab>
        <tab name="Emails" panel-class="tab-pane">...</tab>
    </tabs>
</div>

vue3-tabs-component-scroll-issue

Is there a way to set window.scrollTo({ top : 0 }) after the tab is shown or set, or ... ? I tried to add window.scrollTo({ top : 0 }) to the changed callback, but this is not working. Any idea ?

Jacobs63 commented 2 years ago

Hello,

this seems to be caused by the default browser scroll behavior, as you've pointed out.

Prop options.disableScrollBehavior has been added to the Tabs component which can disable this (without needing to disable the hash completely via useUrlFragment).

Version 1.1.1 has been released which contains this new feature.