2

Как реализовать прокрутку блоков в контейнере?

.container {
  font-size: 0;
  width: 75%;
  padding: 10px 0;
  margin: 0 auto;
  background-color: #ccc;
  white-space: nowrap;
  overflow: hidden;
}

.container-item {
  display: inline-block;
  width: 150px;
  height: 150px;
  margin-right: 5px;
  background-color: #47ada5;
}
<div class="container">
  <div class="container-item"></div>
  <div class="container-item"></div>
  <div class="container-item"></div>
  <div class="container-item"></div>
  <div class="container-item"></div>
  <div class="container-item"></div>
</div>

JSFiddle

4
  • 1
    помог ответ????
    – L. Vadim
    7 янв 2017 в 19:36
  • Т.е. в данном случае делается обертка для container которая скрывает скролл?
    – A. Gr
    7 янв 2017 в 21:29
  • 1
    именно - добавляется педдинг и скрол остается не видимым
    – L. Vadim
    8 янв 2017 в 10:07
  • Спасибо за полезный совет!
    – A. Gr
    8 янв 2017 в 10:09

1 ответ 1

2

Поменяйте оверфлов на это: overflow-y: scroll;

.container {
  font-size: 0;
  width: 75%;
  padding: 10px 0;
  margin: 0 auto;
  background-color: #ccc;
  white-space: nowrap;
  overflow-y: scroll;
}
2
  • А есть способ прокрутки без отображения скролла?
    – A. Gr
    7 янв 2017 в 15:42
  • 1
    да можно - создаете 2 дива, первый overflow:hidden; второй- overflow-y:scroll - один сидит в другом
    – L. Vadim
    7 янв 2017 в 15:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.