Javascript 如何制作垂直导航选项卡的滚动

我有超过10个导航项目，我想显示10个导航项目，其余项目将在滚动中移动，因为我正在尝试创建顶部和底部按钮（图标），该按钮将滚动垂直列表顶部和底部的其余项目

<ul class="nav nav-tabs" id="myTab" role="tablist">

     <span class="to-previous getPrevious">
         <i class="fa fa-angle-up"></i>
     </span>

     <li class="nav-item">
         <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab">1</a>
     </li>

     <li class="nav-item">
         <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab">2</a>
     </li>

     <li class="nav-item">
         <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab">3</a>
     </li>

     <li class="nav-item">
         <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab">4</a>
     </li>

     <span class="to-next getNext"><i class="fa fa-angle-down"></i></span>

     <span class="to-next getNext"><i class="fa fa-angle-down"></i></span>

</ul>

我期望输出，点击其中一个图标rest项目应该是可见的。。。 在上面的代码中只有4个列表项，但它们应该超过50个

---

提前感谢您

您试图实现的目标仅凭想象是有点难以理解的，但我认为这个Jquery插件应该会有所帮助