以编程方式滚动ng-repeat with overflow：hidden

Question

我正在使用以下标记（JADE）来构建AngularJS和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 »

在CSS中，我设置了overflow: hidden。这让我知道了：

到目前为止完美，但显然这可能会很长。

当用户点击最后的小箭头符号时，如何进行此滚动？

我尝试过像$(...).animate({left: '-=20'})这样的东西，但它只是被忽略了（我猜是因为基础CSS）。有什么想法吗？

更新

我有一个半工作的解决方案，但它很难看。

我已将ng-show条件附加到重复的列表项目中：

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

加载我的数据后我做了

$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);
});

然后我基本上只需要在min处理程序中为箭头按钮调整max和ng-click。这或多或少都有效，但由于某种原因，availableWidth的计算量远远大于实际可用的空间 - 它大约600px！为什么呢？

Answer 1

动画左侧位置毫无意义。你想要设置动画的是水平滚动位置（element.scrollLeft）。

另外，请考虑从月份列表中删除箭头。它们在该列表中没有语义上的意义，当你想要滚动几个月但是留下箭头时，它们最终会限制你。

编辑添加小提琴：http://jsfiddle.net/R9QcB/5/我使用jQuery快速做到这一点，但scrollLeft是一个原生的javascript属性。

这里的CSS实际上比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;
        }

基本上，您需要一个可以更新scrollLeft位置的包含元素。包含元素的那个包含一个溢出：隐藏在它上面，以便它的子元素位于容器内的一个系列中（这是white-space：nowrap的结果）。