Center element in horizontal scroll


I have a main navigation menu wich is represented by an horizontal scroll of elements.
When I click a menu option ( actually categories ), I would need to center that menu item in the horizontal menu. I mean, the active category should be centered in the menu.

Any idea on how to make that?


I’d say, do it via JavaScript:

  • Find out the width of each item until the item you want to center
  • Add all the widths together + half the width of the menu item you want to center
  • Then set the element.scrollLeft position to your calculated value


Sounds like a good solution.
Thank you very much.

Top navigation tabs iPhone style [SOLVED]

Let me explain how finally solved that.
Ionic has a tool called ionic.DomUtil to interact the dom using angular.

So using the mehtod getPositionInParent(element) you can directly get the scroll position of the element.
Then you just use $ionicScrollDellegate to get the actual scroll element and scrollTo the element position.