Struggling to implement a scroll navigation with ionic, but encountering issues with navigation and styling. Seeking guidance on how to achieve the desired outcome:
Desired navigation look: https://i.sstatic.net/vQ2CS.png
Current implementation showcases a horizontal scrollable list, but aiming for a navigation bar where the selected item moves to the center:
https://i.sstatic.net/9vP7y.png
When the first element is active, the left side of the list should remain empty and scroll like a navigation. Currently have a horizontal list, but struggling to center the active element during scrolling.
<ion-scroll direction="x" class="wide-as-needed">
<div ng-repeat="type in types" style='display: inline-block; margin: 5px;' >
<a href="" id="anchor{{type}}" scroll-to="anchor{{type}}" class="button inline-button button-clear button-dark">{{type|uppercase}}</a>
</div>
</ion-scroll>
The directive for anchor navigation aims to navigate to the element itself, but currently only makes it visible rather than centering it within the navigation list. More details can be found here: https://docs.angularjs.org/api/ng/service/$anchorScroll. It's worth noting that Angular $anchorScroll is primarily designed for vertical scrolling.
Consider utilizing the TabbedSlideBox plugin for tab navigation, although it doesn't natively support centering the tab when active.