[DwieDima]

Issue number: resolves #26510

---

What is the current behavior?

• ion-tab-bar has no fade scroll effect, unlike ion-header and ion-footer (feat: tab-bar fades in on scroll on iOS #26510).
• scrollEffect="hide" on an ion-tab-bar inside ion-tabs only follows the first ion-content in the app. It works on the first tab, but not on other tabs or on pages that are pushed inside of a tab.
• scrollEffect="hide" animates out after a scroll threshold and returns on the first pixel scrolled back. A header and a tab bar that hide together leave a gap behind.

What is the new behavior?

• ion-tab-bar supports scrollEffect="fade". The background and border fade out when the content is scrolled to the end and fade back in when scrolling away from it. The tab buttons are not affected.
• scrollEffect="hide" follows the scroll pixel by pixel for ion-header, ion-footer, and ion-tab-bar. A bar that is fully out of view only returns when the content is scrolled back quickly, so slow scrolling and small movements do not bring it back. A bar that is partly out of view follows the scroll back at any speed, and settles to the closest edge when the scrolling stops. The content extends under the bars, so no gap is left behind. The header and footer also fade out as they move, so they cannot stay visible in front of a tab bar that is out of view.
• A bar that is out of view stays reachable. It is not inert or hidden from assistive technology, and moves back into view when an element in it receives focus, so keyboard and screen reader users can reach it without scrolling back quickly.
• A tab bar in ion-tabs follows the page that is visible, and by default only applies its scroll effect to pages that cannot go back, such as the root page of a tab. The tab bar stays in place on pages that were navigated to. A page can change this with the new tabBarScrollEffect property on ion-content.
• A header that hides does not take part in the large title collapse. The large title scrolls away with the content instead of disappearing once the header is out of view.

Hide follows the scroll. Only a quick scroll back reveals it.	Root pages hide the tab bar. Pages that can go back keep it, unless they opt in.	scrollEffect="fade" on a translucent tab bar.
Header, footer, and tab bar hide together without a gap.	Large title with a header that hides.	A header with multiple toolbars hides as one.

Usage

Set scroll-effect on the tab bar. It works the same in Angular, React, and Vue.

<ion-tabs>
  <ion-router-outlet></ion-router-outlet>
  <ion-tab-bar slot="bottom" scroll-effect="hide">
    <!-- or scroll-effect="fade" -->
  </ion-tab-bar>
</ion-tabs>

The header and the footer take the same property, and apply to the page they are in:

<ion-header scroll-effect="hide"></ion-header>
<ion-footer scroll-effect="hide"></ion-footer>

Use tabBarScrollEffect on the content of a page to decide whether the tab bar applies its scroll effect there:

<!-- A page that can go back, but still hides the tab bar -->
<ion-content [tabBarScrollEffect]="true"></ion-content>

<!-- A root page that keeps the tab bar in place -->
<ion-content [tabBarScrollEffect]="false"></ion-content>

When it is not set, the scroll effect applies to pages that cannot go back, and not to pages that can.

Try it

The scenarios above are in a sample app: ionic-tab-bar-scroll-effect-sample.

Does this introduce a breaking change?

• Yes
• No

[vercel]

@DwieDima is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.