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

我正在使用以下标记（JADE）构建一个带有AngularJS和的分页

在CSS中，我设置了溢出：隐藏。这让我明白：

到目前为止还很完美，但显然这可能会持续很长时间

当用户单击末尾的小箭头符号时，如何制作此滚动？

我曾尝试过诸如<代码> $（…）之类的东西。动画（{左：‘＝20’}）< /C> >但它只是被忽略了（我猜是因为基础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")

---

然后，我基本上只需要在

ng单击

处理程序中调整箭头按钮的

min

和

max

。这或多或少是可行的，但出于某种原因，

可用宽度

的计算量要比实际可用空间小得多-大约减少了600px！为什么？

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

也可以考虑把你的箭头从月份列表中删除。在该列表中，它们在语义上没有意义，当您只想滚动月份，但将箭头保留在适当位置时，它们最终会限制您

编辑以添加fiddle：为了快速起见，我使用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位置。该包含元素有一个溢出：隐藏在其上，以便其子元素位于容器内的一个系列中（这是空白：nowrap的结果）。

我先尝试了，但执行

scrollLeft

没有做任何事情-它只是被忽略了。我在

ul

中有箭头，因此它们成为分页的一部分。是的，我认为CSS可能是关键，但CSS绝对不是我的强项。无论哪种方式，我都希望避免绕过基金会CSS，所以我试图将你所张贴的内容整合到我所拥有的东西中。再一次，被忽视了…你的魔法发生在哪里？你能再解释一下吗？魔法在于理解CSS的溢出属性以及javascript的scrollTop和scrollLeft属性。下面是一个非常基本的示例：#overflow frame div将有一个scrollLeft属性，可以轮询（获取其位置）或更新（设置其位置）。在jQuery中，这个方法是$.scrollLeft（）.Ha，我知道了！我开始在Firefox开发者工具中手动禁用foundation的CSS规则，直到它开始工作。结果是他们在分页中对

li

s应用了

float:left

。我对CSS的了解还不够，无法理解为什么它不能正常工作，但是添加了

float:none！重要的到我自己的样式表就可以了。谢谢你给我指出了正确的方向！
$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);
});

#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;
        }