Programmatically scroll ng-repeat with overflow:hidden

Question

I'm using the following markup (JADE) to build a pagination with AngularJS and Foundation.

ul.pagination
    li.arrow: a «
    li(ng-repeat="month in months | orderBy:'_id'" ng-class="month._id === shownMonth ? 'current' : ''")
        a(ng-href="#/months/{{month._id}}") {{ month._id | monthid:'short' }}   
    li.arrow#right-arrow: a »

In the CSS, I've set overflow: hidden. This gets me this:

Perfect so far, but obviously this could get long.

How can I make this scroll when the user clicks on the little arrow symbols at the end?

I've tried doing stuff like $(...).animate({left: '-=20'}) but it simply gets ignored (I'm guessing because of the Foundation css). Any ideas?

UPDATE

I've got a semi-working solution, but it's ugly.

I have attached an ng-show condition to the repeated list items as such:

li(ng-repeat="month in months | orderBy:'_id'" ng-class="month._id === shownMonth ? 'current' : ''" ng-show="month._id >= min && month._id <= max")

and after loading my data I do

$timeout(function() {
    var availableWidth = $('ul.pagination').width() - 2 * $('ul li.arrow').width();
    var itemWidth = $('li:not(.arrow)').width();
    var total = Math.floor(availableWidth / itemWidth);
    $scope.min = $scope.shownMonth - Math.floor(total / 2);
    $scope.max = $scope.shownMonth + Math.floor(total / 2);
});

Then I basically just need to adjust min and max in an ng-click handler for the arrow buttons. This works, more or less, but for some reason, availableWidth gets calculated to much, much smaller than the space that's actually available for it - it's off by about 600px! Why?

Answer 1

Animating the left position makes no sense. What you want to animate is the horizontal scroll position (element.scrollLeft).

Also, consider removing your arrows out of the list of months. They don't make sense semantically in that list, and they'll end up constraining you when you want to scroll just the months but leave the arrows in place.

Edited to add fiddle: http://jsfiddle.net/R9QcB/5/ I did this with jQuery for quickness, but scrollLeft is a native javascript property.

It's the CSS that's actually important here moreso than the javascript:

#pagination {
    text-align: center;
}
    .nav {
        display: inline-block;
        vertical-align: middle;
    }
    ul {
        display: inline-block;
        vertical-align: middle;
        max-width: 75%;
        overflow: hidden;
        white-space: nowrap;
    }
        li {
            display: inline-block;
            list-style: none;
            color: #fff;
            background: #aaa;
            padding: 0.25em 0.5em;
            margin: 0 0.5em;
        }

Basically, you need a containing element that you can update the scrollLeft position of. That containing element has an overflow: hidden on it so that its child elements sit in a series inside the container (which is a result of white-space: nowrap).