Как скрыть горизонтальную полосу прокрутки при прокрутке в мобильном - PullRequest
Новая
       10

Как скрыть горизонтальную полосу прокрутки при прокрутке в мобильном

1 голос
/ 11 июня 2019

У меня есть несколько списков, которые я отображаю в одной строке на рабочем столе, но на мобильном телефоне, я должен отобразить то же самое, но его нужно прокручивать по горизонтали, проводя пальцем.

Я попробовал приведенный ниже код с помощью CSS.Это работает, но я не хочу показывать горизонтальную полосу прокрутки во время прокрутки.Кроме того, я использую загрузчик 4, поэтому я добавил свой список в контейнер.

Не могли бы вы помочь мне в этом?

enter image description here

.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>

Ответы [ 2 ]

0 голосов
/ 15 июня 2019

Использование ::-webkit-scrollbar CSS псевдоэлемента (для браузеров веб-наборов) и 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 для прокрутки

0 голосов
/ 11 июня 2019

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>
...