горизонтальная прокрутка для различного количества столбцов div внутри элемента - PullRequest
Новая
       30

горизонтальная прокрутка для различного количества столбцов div внутри элемента

2 голосов
/ 31 марта 2020

У меня есть несколько столбцов, плавающих в контейнере. Ширина контейнера является чувствительной (100%) и будет различной ширины в зависимости от размеров окна пользователя. Когда столбцы не могут поместиться в контейнерах, я хочу, чтобы он автоматически go перешел в горизонтальную прокрутку. Я думал бы, что мой стиль достиг бы этого, но это не работает. В примере я показал 9 столбцов, но в зависимости от сценария ios могут быть разные цифры от 3-15. Там тоже есть предзагрузчик. Дочерние элементы не могут быть встроенным блоком, или переполнение скрыто. 

#container {
  overflow-x: scroll;
  position: relative;
  white-space: nowrap;
  width: 100%;
}

.column {
  float: left;
  width: 300px;
}

#preloader {
  display: none;
  height: 100%;
  width: 100%
}

.clr {
  clear: both;
}
<div id="container">
  <div id="preloader"></div>
  <div id="columns">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <div class="column">5</div>
    <div class="column">6</div>
    <div class="column">7</div>
    <div class="column">8</div>
    <div class="column">9</div>
    <div class="clr"></div>
  </div>
</div>

Как мне сделать это плавно и плавно?

Ответы [ 2 ]

1 голос
/ 31 марта 2020

div элементы являются блочными элементами, поэтому вам необходимо преобразовать их в inline или inline-block элементов

A элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).

  • Просто добавьте display:inline-block к .column

Ваш код должен быть таким: 

#container {
  overflow-x: scroll; 
  white-space: nowrap; 
  width: 100%; 
}

.column { 
  display: inline-block;
   width: 300px; 
}

#preloader {
  display: none;
  height: 100%;
  width: 100%
}

.clr {
  clear: both;
}
<div id="container">
  <div id="preloader"></div>
  <div id="columns">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <div class="column">5</div>
    <div class="column">6</div>
    <div class="column">7</div>
    <div class="column">8</div>
    <div class="column">9</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <div class="column">5</div>
    <div class="column">6</div>
    <div class="column">7</div>
    <div class="column">8</div>
    <div class="column">9</div>
    <div class="clr"></div>
  </div>
</div>
0 голосов
/ 31 марта 2020

Проблема в том, что float автоматически оборачивает элементы, как только заканчивается конец их родительского элемента. С другой стороны, ваш div#columns увеличится до максимальной ширины div#container (то есть общей ширины экрана).

Чтобы решить эту проблему, вы должны назначить div#columns ширину. Ниже приведен небольшой пример того, как сделать это динамически, вычисляя общую ширину div.colum, которую он содержит. 

var sum = 0;
$(".column").each(function(){sum += $(this).width()});
$("#columns").css('width', sum);
#container {
  overflow-x: scroll;
  position: relative;
  white-space: nowrap;
  width: 100%;
}

.column {
  float: left;
  width: 300px;
}

#preloader {
  display: none;
  height: 100%;
  width: 100%
}

.clr {
  clear: both;
}

   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="container">
  <div id="preloader"></div>
  <div id="columns">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <div class="column">5</div>
    <div class="column">6</div>
    <div class="column">7</div>
    <div class="column">8</div>
    <div class="column">9</div>
    <div class="clr"></div>
  </div>
</div>

Это решение основано на этой публикации SO и использует jQuery для вычисления общей ширины элементов, но Вы могли бы сделать это также с простым javascript.

...