Как создать горизонтальный скролл с двумя рядами внутри?

Question

Маргарита

html , css

Как создать горизонтальный скролл с двумя рядами внутри?

Как настроить прокрутку по горизонтали внутри контейнера с двумя горизонтальными рядами блоков, чтобы они не выходили за рамки контейнера? Когда я добавляю скролл по горизонтали, блоки уходят друг под друга вместо того, чтобы оставаться в ряды. Вот мой код:
```
<div class="wrapper">
      <ul class="list__block">
         <li class="item__block"></li>
         <li class="item__block"></li>
         <li class="item__block"></li>
         <li class="item__block"></li>
         <li class="item__block"></li>
         <li class="item__block"></li>
         <li class="item__block"></li>
      </ul>
   </div>

.wrapper {
   width: 1200px;
   height: 608px;
   background-color: blue;
   margin: auto;
   display: flex;
   align-items: center;
}
.list__block {
   margin-left: auto;
   border: 1px solid red;
   width: 1000px;
   height: 580px;
   display: flex;
   flex-wrap: wrap;
   overflow-x: scroll;
   overflow-y: hidden;
   gap: 20px;
}
.item__block {
   width: 450px;
   height: 247px;
   background: red;
}
```
Хочу, чтобы блоки оставались в рядах при прокрутке по горизонтали внутри контейнера и не выходили за его рамки.

29 октября 2023 г. 8:19

Ответы на вопрос 3

Похожие вопросы

Answer 1

Для достижения желаемого результата вам необходимо добавить скролл-бары для контейнера с помощью свойства `overflow`. Добавьте `overflow-x: scroll;` для контейнера `.wrapper` и `overflow-x: auto;` для списка `.list__block`. Это позволит добавить горизонтальную прокрутку при достижении пределов контейнера.

Также вам нужно задать фиксированную ширину для элемента `.item__block`, чтобы он оставался в рамках ряда. Вы можете использовать, например, `width: 33%;` для списка, чтобы каждый ряд состоял из трех блоков.
 
Вот измененный код:

```
<div class="wrapper">
  <div class="scroll-container">
    <ul class="list__block">
       <li class="item__block"></li>
       <li class="item__block"></li>
       <li class="item__block"></li>
       <li class="item__block"></li>
       <li class="item__block"></li>
       <li class="item__block"></li>
       <li class="item__block"></li>
    </ul>
  </div>
</div>

.wrapper {
   width: 1200px;
   height: 608px;
   background-color: blue;
   margin: auto;
}

.scroll-container {
  overflow-x: scroll;
  height: 100%;
}

.list__block {
   width: 100%;
   height: 580px;
   display: flex;
   flex-wrap: wrap;
   overflow-x: auto;
   gap: 20px;
}

.item__block {
   width: 33%;
   height: 247px;
   background: red;
}
```

Теперь элементы будут оставаться в рядах, и горизонтальная прокрутка будет появляться при достижении пределов контейнера. Вы можете изменять количество элементов в ряду, изменяя ширину блока `.item__block` или свойство `width` элемента `.list__block`.

Answer 2

Используйте свойство overflow: scroll в CSS для добавления прокрутки к контейнеру. Вы можете настроить горизонтальную и вертикальную прокрутку следующим образом:
.scroll-container {
  width: 300px; /* Ширина контейнера */
  height: 200px; /* Высота контейнера */
  overflow-x: scroll; /* Горизонтальная прокрутка */
}

Answer 3

 .scroll-container {
  width: 300px; /* Ширина контейнера */
  height: 200px; /* Высота контейнера */
  overflow-y: scroll; /* Вертикальная прокрутка */
}