Как сделать чтобы список фильтров на мобильный устройствах можно было прокручивать но чтобы на остальной странице не возникал горизонтальный скролл?

Question

как сделать чтобы скролл работал только для меню фильтров,а не для всей страницы? может дело в ширине?

 .main__nav
    {
        margin-left: -20px;
        margin-right: 115px;
        margin-top:24px;
        list-style: none;
        display: inline-flex;
        flex-direction: row;
        gap:8px;
        justify-content: start;
        /*max-width: 633px;*/
        height: 44px;
        flex-wrap: wrap;
        overflow-x: scroll;
        min-width: 1200px;
    }
    .border{
        display: flex;
        /*padding:6px 8px ;*/
        align-items: stretch;
        border:1px solid #C1C5CD;
        border-radius: 24px;
        gap:4px;
        height: 20px;
        justify-content: center;
        font-family:Montserrat,sans-serif;
        font-style: normal;
        text-decoration: none;
        color: #333;
        font-size:14px;
        font-weight: 600;
        align-self: stretch;

    }
    .main__self
    {
        border: 1px solid #16C8BB;
    }

 <ul class="main__nav">
    <li class="main__nav_item"><a class="border" href='#'>Все</a></li>
        <li class="main__nav_item"><a class="border border_long" href='#'><span class="main__nav_text">Самооценка и самопринятие</span></a></li>
    <li class="main__nav_item"><a class=" border main__self" href='#'><span>&#129412;Self</span></a></li>
    <li class="main__nav_item"><a class="border border_long main__item" href='#'><span class="main__nav_text">Чувства и эмоции</span></a></li>
    <li class="main__nav_item"><a class="border main__item" href='#'><span>Тревога</span></a></li>
    <li class="main__nav_item"><a class="border main__item" href='#'><span>Упражнения</span></a></li>
    <li class="main__nav_item"><a class="border border_long main__item" href='#'><span class="main__nav_text">Психология питания</span></a></li>
    <li class="main__nav_item"><a class="border main__item" href='#'><span>Насилие</span></a></li>
    <li class="main__nav_item"><a class="border border_long main__item" href='#'><span class="main__nav_text">Личное здоровье</span></a></li>
</ul>

Answer 1

Позвольте списку растягиваться на всю доступную ширину, убрав min-width: 1200px, и принудительно установите полосу прокрутки только по горизонтали с помощью overflow: scroll hidden:

.main__nav {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 3px 0;
  overflow: scroll hidden;
}

.border {
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  padding: 6px 8px;
  border: 1px solid #C1C5CD;
  border-radius: 24px;
  font: 600 14px/1em Montserrat, sans-serif;
  text-decoration: none;
  color: #333;
}

.main__self { border: 1px solid #16C8BB; }

<ul class="main__nav">
  <li class="main__nav_item"><a class="border" href='#'>Все</a></li>
  <li class="main__nav_item"><a class="border border_long" href='#'><span class="main__nav_text">Самооценка и самопринятие</span></a></li>
  <li class="main__nav_item"><a class=" border main__self" href='#'><span>&#129412;Self</span></a></li>
  <li class="main__nav_item"><a class="border border_long main__item" href='#'><span class="main__nav_text">Чувства и эмоции</span></a></li>
  <li class="main__nav_item"><a class="border main__item" href='#'><span>Тревога</span></a></li>
  <li class="main__nav_item"><a class="border main__item" href='#'><span>Упражнения</span></a></li>
  <li class="main__nav_item"><a class="border border_long main__item" href='#'><span class="main__nav_text">Психология питания</span></a></li>
  <li class="main__nav_item"><a class="border main__item" href='#'><span>Насилие</span></a></li>
  <li class="main__nav_item"><a class="border border_long main__item" href='#'><span class="main__nav_text">Личное здоровье</span></a></li>
</ul>

Насколько я понял, все эти отступы в вашем коде - это попытка спрятать стрелки полосы прокрутки. Это проще сделать используя собственные стили:

.main__nav {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 3px 0;
  overflow: scroll hidden;
  overscroll-behavior: contain;
}

.border {
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  padding: 6px 8px;
  border: 1px solid #C1C5CD;
  border-radius: 100vmax;
  font: 600 14px/1em Montserrat, sans-serif;
  text-decoration: none;
  color: #333;
}

.main__self { border: 1px solid #16C8BB; }

/* Firefox */
.main__nav { scrollbar-width: thin; scrollbar-color: #ddd4 #ddd2; }
.main__nav:hover { scrollbar-color: #ddd #ddd4; }
/* Chrome, Edge, Safari */
.main__nav::-webkit-scrollbar { height: 6px; width: 6px; }
.main__nav::-webkit-scrollbar-track { background-color: #ddd2; border-radius: 100vmax; }
.main__nav:hover::-webkit-scrollbar-track { background-color: #ddd4; }
.main__nav::-webkit-scrollbar-thumb { background-color: #ddd4; border-radius: 100vmax; }
.main__nav:hover::-webkit-scrollbar-thumb { background-color: #ddd; }

<ul class="main__nav">
  <li class="main__nav_item"><a class="border" href='#'>Все</a></li>
  <li class="main__nav_item"><a class="border border_long" href='#'><span class="main__nav_text">Самооценка и самопринятие</span></a></li>
  <li class="main__nav_item"><a class=" border main__self" href='#'><span>&#129412;Self</span></a></li>
  <li class="main__nav_item"><a class="border border_long main__item" href='#'><span class="main__nav_text">Чувства и эмоции</span></a></li>
  <li class="main__nav_item"><a class="border main__item" href='#'><span>Тревога</span></a></li>
  <li class="main__nav_item"><a class="border main__item" href='#'><span>Упражнения</span></a></li>
  <li class="main__nav_item"><a class="border border_long main__item" href='#'><span class="main__nav_text">Психология питания</span></a></li>
  <li class="main__nav_item"><a class="border main__item" href='#'><span>Насилие</span></a></li>
  <li class="main__nav_item"><a class="border border_long main__item" href='#'><span class="main__nav_text">Личное здоровье</span></a></li>
</ul>

БЛОГ НА HUSL

Как сделать чтобы список фильтров на мобильный устройствах можно было прокручивать но чтобы на остальной странице не возникал горизонтальный скролл?

Ответы (1 шт):