以编程方式滚动 ng-repeat 并溢出：隐藏

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'}) 这样的东西，但它只是被忽略了（我猜是因为 Foundation 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);
});

然后我基本上只需要在箭头按钮的ng-click 处理程序中调整min 和max。这或多或少是有效的，但由于某种原因，availableWidth 的计算结果比实际可用的空间要小得多 - 大约相差 600 像素！为什么？

Answer 1

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

另外，请考虑将您的箭头从月份列表中删除。它们在该列表中的语义上没有意义，当您只想滚动月份但将箭头留在原处时，它们最终会限制您。

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

这里实际上比 javascript 更重要的是 CSS：

#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 位置的包含元素。该包含元素有一个 overflow: hidden ，因此它的子元素位于容器内的一系列中（这是 white-space: nowrap 的结果）。