css - 以编程方式滚动 ng-repeat 溢出 :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'}) 的东西，但它只是被忽略了(我猜是因为 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)。

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

编辑添加 fiddle :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 位置的包含元素。该包含元素有一个 overflow: 隐藏在它上面，因此它的子元素位于容器内的一个系列中(这是 white-space: nowrap 的结果)。