Javascript 带滚动选项卡的基于水平选项卡的菜单

我有一个简单的水平菜单，更像标签。。我希望它像BBC应用程序标签菜单一样工作，这样当菜单有更多的项目时，它将允许在两个方向上水平滚动

我的代码也在这里

我尝试了几件事，但似乎没有什么像我包装的div与固定宽度的菜单，并试图使其滚动，但没有工作，因为它总是添加滚动条。我试着让它旋转，这对我也不起作用

是否有任何类似的基于HTML的网站插件。BBC应用程序使用的导航条在应用程序中非常常见，我希望我可以为基于HTML的移动版网页提供类似的导航条

<div class="tab-nav-wrapper">
  <ul>
    <li class="one"><a href="#">MenuONE</a></li>
    <li class="two"><a href="#">MTWO</a></li>
    <li class="three"><a href="#">THREE</a></li>
    <li class="four"><a href="#">FOUR</a></li>
    <li class="five"><a href="#">MenuFIVE</a></li>
    <hr />
  </ul>
</div>
<div class="tab-content-wrapper">
  <div class="tab1-c">
    <p>This is ONE.</p>
  </div>
  <div class="tab2-c">
    <p>This is TWO</p>
  </div>
  <div class="tab3-c">
    <p>This is THREE</p>
  </div>
  <div class="tab4-c">
    <p>This is FOUR</p>
  </div>

  <div>

这是一个

这是两个

这是三个

这是四

我用以下代码更改了codepen，该代码基本上通过强制包装高度和隐藏溢出来隐藏滚动条

.tab-nav-wrapper{
  /* forced the wrapper height and set overflow to hidden to hide the ul scrollbar */
  height: 47px;
  overflow: hidden;
}

.tab-nav-wrapper > ul{
  /* padding: 0 !important; */
  overflow-x: auto;
  white-space: nowrap;
  /* this padding will place the scrollbar inside the hidden overflow */
  padding: 0 0 20px;
}

如果你不介意强制菜单的高度，这应该可以

编辑：请记住，为了能够滚动此菜单，您需要能够水平滚动的设备（如触摸设备或触摸板）

您可以使用。正如您所见，您可以通过鼠标拖动水平滚动选项卡，并且没有水平滚动条。此外，我还使用了

responsive

选项来调整不同宽度上显示选项卡的数量，但您可以修改它。这是和

//猫头鹰转盘
$（'.tabs'）.owlCarousel({
循环：对，
导航：错，
点：错，
响应：{
0:{items:2}，
250:{项目：3}，
400:{项目：4}，
500:{项目：5}
}
});
//标签
$（'.tabs li a'）。单击（函数（）{
var activeLink=$（this.data（'target'）；
var targetTab=$（'.tab.'+activeLink）；
targetTab.sides（）.removeClass（'active'）；
targetTab.addClass（“活动”）；
});
正文{
背景：白色；
}
a{
颜色：白色；
文字装饰：无；
字体大小：12px；
文本转换：大写；
}
保险商实验室{
列表样式类型：无；
最大宽度：500px；
保证金：2倍自动；
背景:353434 ;；
填充：0；
}
.选项卡内容{
最大宽度：500px；
边框：1px纯黑；
保证金：0自动；
}
.owl控件{
显示：无；
}
李{
显示：内联块；
填充：10px 20px；
空白：nowrap；
过渡：所有0.3秒都容易进入；
边框底部：4px实心透明；
}
李：悬停{
边框底部：4倍纯白；
不透明度：0.7；
光标：指针；
}
.选项卡内容>div{
显示：无；
}
.tab内容>div.active{
显示：块；
}
.info{
文本对齐：居中；

抓取并拖动用于滚动的选项卡

标签一
选项卡二
标签三
标签四
标签五
标签六
标签七
选项卡八

一个人坐在我的位子上，向精英致敬。全方位，全方位！
两个
Lorem ipsum door sit amet，concertetur
三
四
五
六
七
八
要使元素中的内容可滚动，首先我们需要向元素添加
溢出：滚动
或
溢出：自动
。（参见区别。）

然后，我们需要让内容占据尽可能多的空间。删除
宽度：100%
以允许这样做。此外，添加
空白：nowrap
，以防止内容断开到多行

.tab-nav-wrapper > ul {
  padding: 0 !important;
  margin: 0 !important;
  /* width: 100%; */ /* remove */
  white-space: nowrap; /* add */
  display: inline-block;
  z-index: 100;
  background-color: #ccc;
}

最后，如果不希望滚动条显示（在
.tab nav wrapper
元素上），可以这样隐藏它

.tab-nav-wrapper::-webkit-scrollbar { 
  display: none; 
}

最后，将背景从
tab-nav-wrapper>ul
移动到
tab-nav-wrapper
。这是因为
ul
不会覆盖所有内容，但包装会覆盖所有内容

.tab-nav-wrapper > ul {
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
  z-index: 100;
  /* background-color: #ccc; */ /* move */
}

.tab-nav-wrapper {
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
  overflow: scroll;
  background-color: #ccc; /* move to here */
}

小提琴：

注意：此代码笔示例中的滚动存在问题。鼠标滚轮滚动不起作用，但如果您在设备上查看，或在浏览器的开发模式+设备模式下查看，则可以通过拖动进行滚动。
一个简单的解决方案：

为
.tab导航包装提供一个固定高度，该高度应为li项目（导航项目）的高度，并隐藏溢出的元素（此处我们要隐藏滚动条）：

然后使
ul
可滚动（仅x方向），并防止li元素断开到新行：

.tab-nav-wrapper > ul {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  z-index: 100;
  background-color: #ccc;
  white-space: nowrap; // magic is here
  overflow-x: scroll; // magic is here
}

仅此而已：）。无需javascript即可运行：
这就是您要查找的内容吗？我只是在ul样式中添加了空格：nowrap；overflow-x:auto；类似的内容，但没有显示滚动条。您要查找类似的内容吗->用鼠标拖动菜单项或使用键盘左箭头或右箭头我无法浏览LH:噢，我现在在标签上添加了另一个元素，它不允许向右滚动查看。奇怪的是，我在firefox、chrome和chrome mobile上测试了我的codepen，它运行正常，我甚至更新了它，使它可以使用7个标签，没有任何问题。你是不是在我的codepen或你的本地代码中遇到了这个问题？我在FF上打开了同一个链接，但我无法使用sc滚动。让我尝试另一个浏览器。我在chrome上尝试了相同的浏览器，但看不到第六个或第七个项目。我无法滚动到这些项目。@了解滚动在使用鼠标滚轮时不起作用，但如果在设备模式下查看，可以通过拖动滚动。关于此解决方案：我建议使用.tab nav wrapper>ul:-webkit隐藏滚动条-滚动条{display:none；}而不是调整包装的大小来隐藏它。回答很好且简单。我建议使用
.tab nav wrapper>ul:：-webkit滚动条{display:none；}
来隐藏滚动条，而不是调整包装的大小来隐藏它。@ArneHugo谢谢！Th
.tab-nav-wrapper {
  overflow: hidden; // magic is here
  height: 48px; // magic is here
}

.tab-nav-wrapper > ul {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  z-index: 100;
  background-color: #ccc;
  white-space: nowrap; // magic is here
  overflow-x: scroll; // magic is here
}