Hide Bars (Tab Bar and Toolbar) On Scroll

[tbrcrl]

Hi, is there a way to automatically hide bars (tab bar and / or toolbar) when scrolling a page down?
I didn’t find any mention in the Onsen documentation.
Thanks

[munsterlander]

@tbrcrl You would have to use a combination of JS and CSS to make it happen. You would need to add a scroll event listener to .page__content and then use css display: none; probably. Similar requests have been requested in the forums here, so maybe a quick search will help out. If I have time later today, I will try to post an example or maybe @IliaSky will have one to quickly show.

[tbrcrl]

Thanks for the answer. As hiding bars on scroll is almost a common behavior in the today apps, do you plan to include this feature in a future Onsen release?

[Fran Diox]

@tbrcrl For now we haven’t talked about this feature. As this can be implemented with simple CSS I don’t think we’ll address it any time soon.

[IliaSky]

@tbrcrl As the others mentioned we aren’t sure if and when a feature like this may be added to the core. In the meantime feel free to use something like this.

It’s just a basic demo showing some minor tweaks in classes and styles. It may depend on your app, but I think something like it should be sufficient for most basic cases.

Looking at the behaviour of skype and youtube android apps it seems there are minor differences. In both you can actually drag the toolbar between being shown or not and when you stop dragging it chooses its preferred state. To implement the dragging part you would need to listen for start, movement and end of the drag. So in order to keep things relatively simple I omitted that logic and only made 2 states with a small transition between them.

As for hiding the tabbar menu - in both apps the tabs would always persist regardless of the circumstances, so maybe you shouldn’t try to hide yours. If you still want to the logic would be similar to what is shown in the upper example.

Also the example shows js logic on the scroll event - if you just want a simple solution without any code in which the toolbar scrolls as if it’s part of the content then you can just add the attribute inline to it and you’re good to go.