在移動設備中滾動時如何隱藏水平滾動條

Question

我有一些列表要在台式機上一行顯示，但是在移動設備上，我必須顯示相同的列表，但是應該可以通過滑動來水平滾動。

我使用CSS嘗試了以下代碼。 它正在工作，但我不想在滾動時顯示水平滾動條。 另外，我正在使用引導程序4，因此我將列表添加到了容器中。

您能幫我這個忙嗎？

 .aboutlinks ul { margin: 0; padding: 0; list-style: none; } .aboutlinks ul li { display: inline-block; margin: 15px; border: 1px solid #000; } .aboutlinks ul li a { padding: 6px 25px; display: block; } @media all and (max-width: 768px) { .aboutlinks ul { display: flex; overflow-x: hidden; } } 

 <div class="aboutlinks"> <ul class="smothscrollclass"> <li><a href="" class="">ABCDE</a></li> <li><a href="">FGHIJ</a></li> <li><a href="">KLMNO</a></li> <li><a href="">PQRST</a></li> <li><a href="">UVWX</a></li> <li><a href="">XY</a></li> </ul> </div> 

Answer 1

overflow-x: hidden; 將解決您的問題。 在身體上，而不是在容器上。 請參閱下面的更新的答案：

 .aboutlinks ul { margin: 0; padding: 0; list-style: none; } .aboutlinks ul li { display: inline-block; margin: 15px; border: 1px solid #000; } .aboutlinks ul li a { padding: 6px 25px; display: block; } @media all and (max-width: 768px) { body{ overflow-x: hidden; // add this part } .aboutlinks ul { display: flex; //dont put any overflow here } } 

 <div class="aboutlinks"> <ul class="smothscrollclass"> <li><a href="" class="">ABCDE</a></li> <li><a href="">FGHIJ</a></li> <li><a href="">KLMNO</a></li> <li><a href="">PQRST</a></li> <li><a href="">UVWX</a></li> <li><a href="">XY</a></li> </ul> </div> 

Answer 2

使用::-webkit-scrollbar CSS偽元素（對於Webkit瀏覽器）和scrollbar-color屬性（對於Firefox）

 .aboutlinks ul { margin: 0; padding: 0; list-style: none; } .aboutlinks ul li { display: inline-block; margin: 15px; border: 1px solid #000; } .aboutlinks ul li a { padding: 6px 25px; display: block; } @media all and (max-width: 768px) { .aboutlinks ul { display: flex; overflow-x: auto; } .no-scrollbar { scrollbar-color: transparent transparent; } .no-scrollbar::-webkit-scrollbar { height: 0px; } .no-scrollbar::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); } .no-scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0); -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); } .no-scrollbar::-webkit-scrollbar-thumb:window-inactive { background: rgba(0, 0, 0, 0); } } 

 <div class="aboutlinks"> <ul class="smothscrollclass no-scrollbar"> <li><a href="" class="">ABCDE</a></li> <li><a href="">FGHIJ</a></li> <li><a href="">KLMNO</a></li> <li><a href="">PQRST</a></li> <li><a href="">UVWX</a></li> <li><a href="">XY</a></li> </ul> </div> 

注意：使用shift + mouse wheel或touch gesture滾動