Question

我有一个带有可变数量标签的标签栏，我希望它可以滚动，最好没有javascript。我一直在玩CSS动画来使它运作起来并且几乎有一个工作效果但是当你试图来回移动它会变得非常跳跃并且一旦你到达了它就不喜欢工作标签栏的结尾。

小提琴演示了它，所期望的行为应该是显而易见的。

有没有人建议如何让滚动箭头正确滚动？

HTML：

    <div class="tabView">
      <nav>
        <nav>&lt</nav>
        <nav>&gt</nav>
        <nav>
          <label>Tab 1</label>
          <label>Tab 2</label>
          <label>Tab 3</label>
          <label>...Lot's more tabs...</label>
          <label>Tab 49</label>
          <label>Tab 50</label>
        </nav>
      </nav>
    </div>

CSS：

.tabView > nav {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
}
.tabView > nav > nav:last-of-type {
  z-index: 0;
  position: absolute;
}
.tabView > nav > nav:first-of-type {
  position: absolute;
  z-index: 1;
  left: 0;
}
.tabView > nav > nav:nth-of-type(2) {
  position: absolute;
  z-index: 1;
  right: 0;
}
.tabView > nav > nav:last-of-type {
  animation: slide 10s linear 1;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.tabView > nav > nav:first-of-type:hover ~ nav:last-of-type {
  animation-fill-mode: backwards;
  animation-direction: reverse;
  animation-play-state: running;
}
.tabView > nav > nav:nth-of-type(2):hover + nav:last-of-type {
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-play-state: running;
}
@keyframes slide {
  0% {
    margin-right: -100%;
    margin-left: 0%;
  }
  100% {
    margin-right: 0%;
    margin-left: -100%;
  }
}

/* theming */
.tabView {

}
.tabView > nav {
  padding-left: 1em;
  padding-right: 1em;
}
.tabView > nav > nav {
  padding: 0.5em;
}
.tabView > nav > nav > label {
  padding: 0.5em;
  background-color: #b5b5b3;
  border: 1px solid black;
  border-bottom: none;
  border-top-right-radius: 1em;
  border-top-left-radius: 1em;
}
.tabView > section {
  padding: 1em;
  border: 1px solid black;
  border-bottom-right-radius: 1em;
  border-bottom-left-radius: 1em;
}

奖金问题：有谁知道标签溢出的原因？我不能让它们保持隐藏，我知道它是一种愚蠢的东西我不知道我只是因为某些原因而无法使它工作。

CSS滚动标签栏

0 个答案: