Question

我正在尝试创建一个纯CSS解决方案，它会在点击href链接时向右或向左滚动一组元素。我有基本的工作，我可以点击相应的按钮向右或向左滚动，但后续点击只在初始位置之间切换。我无法向左或向右递增多次。

请记住，目标是纯CSS，因为我正在尝试渲染工作POC或显示需要javascript，因为这不能用纯css完成。

http://plnkr.co/edit/itGDeyE8sfXtEbhBlycJ?p=preview

HTML

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>

    <a id="left" href="#left">&lt;</a>
    <a id="right" href="#right">&gt;</a>

    <div class="f-slideshow">
      <div class="items">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
      </div>
    </div>

  </body>

</html>

CSS

.f-slideshow{
  position:relative;
  max-width:100px;
  overflow:hidden;
  display:inline-block;
}

.f-slideshow .items{
  display:inline-table;
  overflow:hidden;
  width:100%;
  background:#999;
  position:relative;
  box-sizing: border-box;
  -webkit-transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
}

.f-slideshow span{
  margin:3px;
  padding:5px;
  background:#ddd;
  border-radius:3px;
}

#right {
  position: relative;
  left: 125px;
}

#right:target ~ .f-slideshow .items{
  transform: translateX( -50px );
}

#left:target ~ .f-slideshow .items{
  transform: translateX( 0px );
}

Answer 1

为每个滚动位置创建新锚点：

<强> HTML

<a class="pos" id="pos1"></a>
<a class="pos" id="pos2"></a>
<a class="pos" id="pos3"></a>
<a class="pos" id="pos4"></a>

<强> CSS

#pos1:target ~ .f-slideshow .items {transform: translateX(    0px );}
#pos2:target ~ .f-slideshow .items {transform: translateX(  -50px );}
#pos3:target ~ .f-slideshow .items {transform: translateX( -100px );}
#pos4:target ~ .f-slideshow .items {transform: translateX( -150px );}

<小时/> 对左右按钮使用多个锚点，但将其位置设置为绝对值，因此一次只能显示一个。

将它们指向每个“位置”锚。

使用z-index: 1;作为第一个左侧和右侧第一个按钮：

<强> HTML

<a class="left"  id="left1"  href="#pos1">&lt;</a>
<a class="left"  id="left2"  href="#pos2">&lt;</a>
<a class="left"  id="left3"  href="#pos3">&lt;</a>
<a class="right" id="right1" href="#pos2">&gt;</a>
<a class="right" id="right2" href="#pos3">&gt;</a>
<a class="right" id="right3" href="#pos4">&gt;</a>

<强> CSS

.left, .right {
  position: absolute;
}

.right {
  left: 135px;
}

#left1, #right1 {
  z-index: 1;
}

根据滚动位置更改相应左或右按钮的z-index：

<强> CSS

#pos1:target ~ #left1,  #pos1:target ~ #right1,
#pos2:target ~ #left1,  #pos2:target ~ #right2, 
#pos3:target ~ #left2,  #pos3:target ~ #right3, 
#pos4:target ~ #left3,  #pos4:target ~ #right3 {
  z-index: 1;
}

Plunker

使用纯css单击左/右增量“滚动”容器

1 个答案: