Center element in horizontal scroll


#1

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?


#2

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

#3

Sounds like a good solution.
Thank you very much.


Top navigation tabs iPhone style [SOLVED]
#4

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.