水平滚动而不显示条形

Question

我想通过水平滚动显示菜单列表。所以我写了代码：

.sub-menu {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}

.menu.navbar-nav li{
    width: 22%;
    text-align: center;
    display:inline-block;
    vertical-align:top;
}

但它横向显示一个条形但我想消失它。请参阅。

你能告诉我一个人如何删除它。

HTML

<div class="mobile-menu temp-mobile-menu visible-xs">
<div class="sub-menu">
    <ul class="menu nav navbar-nav" id="">
        <li class="active"><a href="/bn" class="first leaf home active">Home</a></li>
        <li><a href="/bn/tonic-doctor" class="leaf doctor">Doctor</a></li>
        <li><a href="/bn/tonic-benefits" class="leaf benefits">Benefits</a></li>
        <li><a href="/bn/packages" class="leaf packages">Packages</a></li>
        <li><a href="/bn/health-topics" style="swiper-slide" class="last leaf স্বাস্থ্য-প্রসঙ্গ">স্বাস্থ্য প্রসঙ্গ</a></li>
    </ul>    
</div>
</div>

更新了CSS

.mobile-menu {
  overflow: hidden;
}
.sub-menu {
  min-height: 44px;
  white-space: nowrap;
  overflow-x: scroll;
}
.menu.navbar-nav li {
 width: 22%;
 text-align: center;
 display: inline-block;
 vertical-align: top;
}

Answer 1

overflow-x: scroll;表示您的水平滚动条可见。

如果要删除它，请使用overflow-x: hidden;

顺便说一句，如果您想隐藏水平和垂直滚动条，只需使用：overflow: hidden;

如果您要隐藏滚动条但保持滚动功能，请在div元素上方添加一个名为CSS class maindiv的{​​{1}}并使用：

sub-menu

Answer 2

尝试将overflow-x: scroll;类

中的overflow-x: hidden;更改为.sub-menu

编辑： 将此类添加到CSS文件：

＆＃13;

＆＃13;

::-webkit-scrollbar { 
width: 0px; /* remove scrollbar space */ 
background: transparent; /* optional: just make scrollbar invisible */ 
}

＆＃13;

＆＃13;

＆＃13;

Working JSFiddle example