Menu icon Foundation
[Tabs] Jump to last scrolled position when re-opening tabs

Hey guys..

So, in Foundation Tabs, you always jump to the beginning of the tab content each time you open a tab.

Is there any method so that when you reopen a tab after opening another tab, you jumps to the last position you left in the first tab??

 

Example:

  1. Open the "A" tabs
  2. Scroll halfway down through the content
  3. Open the "B" tabs
  4. Re-open the "A" tabs and jump to the last scrolled position before you open the "B" tabs

Do you guys have any idea how I can accomplish this?

tabsFoundation

Hey guys..

So, in Foundation Tabs, you always jump to the beginning of the tab content each time you open a tab.

Is there any method so that when you reopen a tab after opening another tab, you jumps to the last position you left in the first tab??

 

Example:

  1. Open the "A" tabs
  2. Scroll halfway down through the content
  3. Open the "B" tabs
  4. Re-open the "A" tabs and jump to the last scrolled position before you open the "B" tabs

Do you guys have any idea how I can accomplish this?

Rafi Benkual 17 days ago

Tabs are not meant to be used for super long content, or to swap between pages (in length) of content.

You might try the JS option listed here:

https://foundation.zurb.com/sites/docs/tabs.html#js-options

data-auto-focus

 

Zulianto Chairul 13 days ago

I thought tabs was supposed to be used as a container for contents?? No? Why limit it to only short content?

 

Anyway, I found a solution for that by making each tabs have their own independent scroll. It can be achieved with simple css like :

.tabs-panel{
	overflow: auto;
	height: 100vh;
}

But now I have another question. How can I integrate hammer.js with foundation tabs so it can be swiped left/right to open next tabs-panel?

 

I'm actually trying to build progressive web apps with foundation and laravel, and i want it to feels like native apps by using swipeable tabs.

zmirli nazim 4 days ago

The original issue is for actual query tabs, but it feels like the same issue, really, since it's behaving the same way in the results grid.

see: ShowBox Mobdro Vidmate