Question

有没有办法只使用CSS实现类似的东西（按钮点击处理程序除外）？

考虑一个分页面板：

<< < 1 2 3 4 5 > >>

点击右侧>按钮时，我想将条目1滑动到5左侧“{1}} <<按钮后面”另外，< 6 7 8 9应从右侧滑入（从10 >按钮后面开始）。

结果应该是 >> << < 6 7 8 9 10 >

同样应该在另一个方向工作。

Answer 1

一般想法

解决方案是在一条水平线上布置页面链接。实现此目的的一种方法是将它们放在列表中，在display:inline上设置<li>，在white-space:nowrap设置<ul>。

接下来，您必须确保隐藏前5个链接以外的所有链接。这可以通过将width和text-overflow:clip设置为固定overflow:hidden来实现。我不得不承认，我对宽度的价值进行了观察。

滚动效果可以通过javascript设置一些属性来实现，如果设置了属性，则使用transform: translateX()和transition: translateX。

代码

仅针对Chrome进行测试，我不承诺此代码适用于任何其他浏览器

var pages = document.getElementById("pages")
var scroll = Number(pages.dataset.scroll);

function scrollLeft() {
  scroll += 1;
  pages.dataset.scroll = scroll;
}

function scrollRight() {
  scroll -= 1;
  pages.dataset.scroll = scroll;
}

.pager a {
  display: inline-block;
  background-color: #aaa;
  color: #fff;
  width: 2em;
  text-align: center;
  padding: .5em 0;
  text-decoration: none;
  margin: 0 .25em;
}

.pager ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

.pager ul li {
  display: inline;
}

#pages {
  width: 13.75em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  float: left;
}

#pages ul {
  transition: transform .5s ease;
}

#pages[data-scroll='1'] ul {
  transform: translateX(-13.75em);
}

<div class="pager">
  <ul class="prev-links">
    <li><a href="#">&lt;&lt;</a></li>
    <li><a href="javascript:scrollRight();">&lt;</a></li>
  </ul>
  <div id="pages" data-scroll="0">
    <ul>
      <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>
    </ul>
  </div>
  <ul class="next-links">
    <li><a href="javascript:scrollLeft();">&gt;</a></li>
    <li><a href="#">&gt;&gt;</a></li>
  </ul>
</div>

改进空间

此代码不检查任何边界。因此，每次点击<或>都会更改变量scroll，无论它是否有意义。

对于每个步骤，您必须包含一个新指令，因此如果您有3个步骤（即超过10个页面），则必须添加

#pages[data-scroll='2'] ul {
  transform: translateX(-27.5em);
}

等等。

<<和>>的链接不起作用，特别是后者会有点棘手（如果你事先不知道，可能是不可能的，有多少页面有。。

一般来说，为了让它完全正常工作，会有很多硬编码的东西。

根据要求，这是我能想到的JS最少的解决方案，但说实话，如果你正在使用JS作为点击处理程序（你必须这样做，因为没有它就不能这样做）），在javascript中实现一些计算和健全性检查会更好，而不是寻找几乎只有CSS的解决方案。

CSS仅使用转换/转换进行分页

1 个答案:

一般想法

代码

改进空间