CSS和html的侧滚动条href问题

Question

我一直在练习使用 HTML 和 CSS 制作网站的代码，并且我想到了一个可以横向滚动的菜单。您可能已经看过它们，除了href 标签，我什么都记下来了。单击字母后，它应该跳转到某个“菜单项”。点击a，你去b，b去c，c回到a。问题是它只工作一次，之后就停止跳跃了。所以我可以按a，它会转到b，然后当我按b转到c时停止工作。请帮忙，谢谢。

.portfolioWrapper .portScroller {
  overflow: auto;
  white-space: nowrap;
  height: 100%;
}

.portfolioWrapper .portScroller li.a {
  width: 100%;
  background-color: blue;
  display: inline-block;
  text-align: center;
}

.portfolioWrapper .portScroller li.b {
  width: 100%;
  background-color: red;
  display: inline-block;
  text-align: center;
}

.portfolioWrapper .portScroller li.c {
  width: 100%;
  background-color: green;
  display: inline-block;
  text-align: center;
}

li.a a.oneAnch {
  text-align: right;
}

li.a a.twoAnch {
  text-align: right;
}

li.a a.threeAnch {
  text-align: right;
}

<div class="portfolioWrapper">
  <a id="portAnchor"></a>
  <div class="portScroller">
    <li class="a"><a href="#prj2" class="one">a</a></li>
    <a id="prj1" class="oneAnch"></a>
    <li class="b"><a href="#prj3" class="two">b</a></li>
    <a id="prj2" class="twoAnch"></a>
    <li class="c"><a href="#prj1" class="three">c</a></li>
    <a id="prj3" class="threeAnch"></a>
  </div>
</div>

Answer 1

您可以通过定义一个<a> 元素来在列表之前显示起始位置来避免这个问题。

/* The following styles have been added. */
a {
  color: white;
  text-decoration: none;
}

.portfolioWrapper .portScroller {
  overflow: auto;
  white-space: nowrap;
  height: 100%;
}

.portfolioWrapper .portScroller li.a {
  width: 100%;
  background-color: blue;
  display: inline-block;
  text-align: center;
}

.portfolioWrapper .portScroller li.b {
  width: 100%;
  background-color: red;
  display: inline-block;
  text-align: center;
}

.portfolioWrapper .portScroller li.c {
  width: 100%;
  background-color: green;
  display: inline-block;
  text-align: center;
}

li.a a.oneAnch {
  text-align: right;
}

li.a a.twoAnch {
  text-align: right;
}

li.a a.threeAnch {
  text-align: right;
}

<div class="portfolioWrapper">
    <a id="portAnchor"></a>

    <div class="portScroller"> 
        <!-- The following line has been added. -->
        <a id="start" class="oneAnch"></a>

        <li class="a">
            <a href="#prj2" class="one">First</a>
        </li>
        <a id="prj1" class="oneAnch"></a>

        <li class="b">
            <a href="#prj3" class="two">Second</a>
        </li>
        <a id="prj2" class="twoAnch"></a>

        <li class="c">
            <!-- The line below has been updated. -->
            <a href="#start" class="three">Thirth</a>
        </li>
        <a id="prj3" class="threeAnch"></a>

    </div>
</div>