javascript - 如何实现像 "Horizontal Scrolling Navigation Bar"这样的分页？

Question

我正在尝试创建一个底部对齐的导航栏，其中包含用于在链接列表中移动的“上一个”和“下一个”按钮，类似于您在长论坛线程底部看到的内容。

链接的数量会因站点的不同部分而异，我希望能够固定在任何时候显示的链接数量(6 个加上上一个 + 下一个按钮)。总是会显示 6 个以上的链接(最少 15 个)。

这是我想要实现的:

HTML 不多，我也没有任何其他代码(除了一些不太相关的美学样式)。我很乐意使用 CSS 和 JavaScript 的任何组合来完成这项工作。

我的HTML如下:

<div class="bottom_nav page_width">
        <ul>
            <li><a href="#"><i class="icon-chevron-left icon-large"></i></a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#">11</a></li>
            <li><a href="#">12</a></li>
            <li><a href="#">13</a></li>
            <li><a href="#">14</a></li>
            <li><a href="#">15</a></li>
            <li><a href="#">16</a></li>
            <li><a href="#"><i class="icon-chevron-right icon-large"></i></a></li>
        </ul>
    </div>

Answer 1

首先，您可以使用 CSS 属性 white-space:nowrap; 将所有链接对齐在一行中。

这将启用水平滚动条，您可以使用 overflow: hidden;

隐藏它

现在您可以使用一个 JavaScript 函数来滚动 div 或 ul 的内容。它可能是 scrollBy(x, y)。

据我了解您的问题，这就是您实现目标的方法。如果不是，请用图片或更好的描述来解释。