ionic-team / ionic-team/ionic-framework

feat: collapse toolbars on scroll

Open
#23,816 1 comment 7 reactions 0 assignees View on GitHub
package: core type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

Provide ability to hide ion-header (Appbar) on scroll

### Describe the Use Case

Given the very limited screen space available on mobile devices, hiding header / appbar on scroll has become a standard feature for lot of apps. Its common across major popular apps.

We have a video list screen, and need to hide the top header along with back button and search bar on scroll.

### Describe Preferred Solution

Ion-header which supports hide on scroll.

Most of good mobile component libraries comes with the ability, be it [vuetify](https://vuetifyjs.com/en/components/app-bars/) or [Framework7](https://v1.framework7.io/docs/hide-bars-on-scroll.html)

This is so common, that many apps end up developing their own solutions, which are some times not as performant or smooth. Many developers have asked the solutions on ionic forums and stackoverflow about how to implement this. and many end up doing it in poor then ideal way

This is one of the must have feature for a rich mobile UI component library.

### Describe Alternatives

None. Need to manually implement by listening scroll events.

### Related Code

_No response_

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.