Bootstrap 4 предотвращает отсечение в переполненной строке с горизонтальной прокруткой - PullRequest
Новая
       34

Bootstrap 4 предотвращает отсечение в переполненной строке с горизонтальной прокруткой

5 голосов
/ 11 марта 2019

Я создал row с горизонтальной прокруткой для всего содержимого col.

Я использовал ответ на этот вопрос: Bootstrap 4 горизонтальный скроллер div

Однако я обнаружил, что элементы внутри container обрезаны.Теперь в некоторых комбинациях OS-Browser (например, MacOS + Chrome) полоса прокрутки скрыта, если она не наводится мышью, и в ходе теста один из наших пользователей не смог найти следующий (обрезанный) элемент col.

Я хотел бы знать, как "отсоединить" элементы за пределами ширины контейнера, чтобы пользователь мог сразу увидеть, что есть еще контент, требующий прокрутки.

Редактировать:

Соответствующий код от этого ответа , а также опубликован на codepen .

Редактировать 2:

Обратите внимание, что я хочу предотвратить перемещение контейнера при прокрутке.

Ответы [ 3 ]

2 голосов
/ 18 марта 2019

Скрытые полосы прокрутки - это функция OSX, от которой пользователи должны отказаться, если они хотят, чтобы полосы прокрутки оставались видимыми. Вы мало что можете сделать, чтобы заставить их оставаться видимыми. Но вы можете явно их стилизовать, так что хром и сафари покажут как минимум.

Вы можете протестировать Mac OS и Chrome / Safari Combo, так как это проблема конкретной платформы. Затем вы можете переопределить стили для полосы прокрутки. Это заставляет его показываться. 

.testimonial-group > .row {
  overflow-x: scroll;
  white-space: nowrap;
}

.testimonial-group > .row::-webkit-scrollbar-track
{
   box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
   border-radius: 10px;
   background-color: #F5F5F5;
}


.testimonial-group > .row::-webkit-scrollbar
{
  width: 0px;
  height: 12px;
  background-color: #F5F5F5;
}

.testimonial-group > .row::-webkit-scrollbar-thumb
{
   border-radius: 10px;
   box-shadow: inset 0 0 6px rgba(0,0,0,.3);
   background-color: #555;
}
1 голос
/ 20 марта 2019

Вам нужно переопределить цвета и поведение полосы прокрутки по умолчанию 

.row {
  overflow-x: scroll;
  scroll-behavior: smooth;
  align-items: left;
  justify-content: left;
  flex-direction: row;
}
.col-sm-4 {
 display: inline;
 align-items: left;
 justify-content: left;
}
/*scroll bar style all brwosers expet IE && Firefox*/
::-webkit-scrollbar {
  width: 8px;
    background-color: rgba(255,255,255,.4);
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,.4);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #787c7d;
}

В противном случае вы можете сделать это с помощью JS вместо css

1 голос
/ 15 марта 2019

Поскольку вы сказали, что хотите, чтобы он был адаптивным к таблице, в котором все div по умолчанию принимают равную ширину доступной ширины родительского элемента, то вам не следует использовать col-sm-4.У элементов div с этим классом будет 33,33% ширины родительского элемента, и ваши остальные элементы Div наверняка не будут видны с этим.

Так что для отзывчивых элементов Div можно отредактировать этот код таким способом. Добавлена ​​ссылка для Codepen здесь. 

<div class="container testimonial-group">
 <div class="row text-center flex-nowrap">
 <div class="col">1</div><!--
  --><div class="col">2</div><!--
  --><div class="col">3</div><!--
  --><div class="col">4</div><!--
  --><div class="col">5</div><!--
  --><div class="col">6</div><!--
  --><div class="col">7</div><!--
  --><div class="col">8</div><!--
  --><div class="col">9</div>
 </div>
</div>

CSS 

/* The heart of the matter */
.testimonial-group > .row {
  white-space: nowrap;
}
.testimonial-group > .row > .col-sm-4 {
  display: inline-block;
  float: none;
 }

 /* Decorations */
.col { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; 
}
.col:nth-child(3n+1) { background: #c69; }
.col:nth-child(3n+2) { background: #9c6; }
.col:nth-child(3n+3) { background: #69c; }
...