Horizontales Scrollen ohne Anzeige der Leiste

Question

Ich möchte die Liste der Menüs anzeigen, indem ich horizontal scrolle. Also habe ich Code geschrieben als:

Aber es zeigt eine Leiste horizontal, aber ich möchte es verschwinden. Bitte beachten Sie die .

Können Sie mir jemanden sagen, wie kann ich es entfernen.

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 aktualisiert

.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; bedeutet, dass Ihre horizontale Bildlaufleiste sichtbar ist.

Wenn Sie es entfernen wollen, verwenden Sie overflow-x: hidden;

By the way, wenn Sie beide horizontale und vertikale wollen scrollers versteckt werden, benutzen Sie einfach: overflow: hidden;

Wenn Sie die Bildlaufleiste ausblenden möchten aber halter Scrollen Fähigkeiten, fügen Sie ein div mit einem CSS class genannt maindiv über die sub-menu Element und Verwendung:

.maindiv{  
    overflow: hidden; 
} 

.sub-menu{ 
    width: 100%; 
    height: 100%; 
    overflow-x: scroll; 
    padding-bottom:20px; 
} 

Answer 2

Versuchen overflow-x: scroll;-overflow-x: hidden; in Ihrem .sub-menu Klasse

EDIT zu ändern: Fügen Sie diese Klasse CSS-Datei:

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

Working JSFiddle example